JS改变页面颜色源码分享

2019-11-19 14:19:04

字体：大中小

来源：转载

供稿：网友

我们先来看下具体的演示效果图

以下就是完整的HTML页面代码，大家可以测试下。

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Document</title>   <style>     .big_box{       width: 500px;       height: 500px;       border: 1px solid black;     }     .big_box input{       margin-left: 60px;     }   </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";     }   </script> </head> <body>   <div class="big_box" id="change_style">     <input type="button" value="变为红色" onclick="Change_red()">     <input type="button" value="变为蓝色" onclick="Change_blue()">     <input type="button" value="变为绿色" onclick="Change_green()">   </div> </body> </html>

上一篇：JS中常用的消息框总结

下一篇：jquery 给动态生成的标签绑定事件的几种方法总结