当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS改变页面颜色源码分享

JS改变页面颜色源码分享

2019年06月07日  | 移动技术网IT编程  | 我要评论

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

以下就是完整的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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网