×

教你如何用JS实现点击切换页面背景

作者:andy0012020.05.18来源:Web前端之家浏览:12180评论:0
关键词:js切换

教你如何用JS实现点击切换页面背景,学好这个后,我们可以进一步的去弄换肤功能。废话不多说,直接上DEMO。

<!DOCTYPE html> 
<html> 
<head> 
  <meta charset="UTF-8"> 
  <title>教你如何用JS实现点击切换页面背景 - Web前端之家https://jiangweishan.com/</title> 
  <style> 
    .big_box{ 
      width: 500px; 
      height: 200px; 
      border: 1px solid black; 
    } 
    .big_box input{ 
      margin-left: 20px; 
    } 
  </style> 
  <script> 
    function Change_red(){ 
      var Red=document.getElementById("change_style"); 
      Red.style.backgroundColor="red"; 
    } 
    function Change_blue(){ 
      var Blue=document.getElementById("change_style"); 
      Blue.style.backgroundColor="blue"; 
    } 
    function Change_green(){ 
      var Green=document.getElementById("change_style"); 
      Green.style.backgroundColor="green"; 
    }
    function Change_pink(){ 
      var Pink=document.getElementById("change_style"); 
      Pink.style.backgroundColor="pink"; 
    }
    function Change_black(){ 
      var Black=document.getElementById("change_style"); 
      Black.style.backgroundColor="black"; 
    } 
  </script> 
</head> 
<body> 
  <p id="change_style"> 
    <input type="button" value="变为红色" onclick="Change_red()"> 
    <input type="button" value="变为蓝色" onclick="Change_blue()"> 
    <input type="button" value="变为绿色" onclick="Change_green()">
    <input type="button" value="变为粉色" onclick="Change_pink()"> 
    <input type="button" value="变为黑色" onclick="Change_black()"> 
  </p> 
</body> 
</html>

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/js20200518a3.html

网友评论文明上网理性发言 已有0人参与

发表评论: