全国统一服务热线:400-633-9193

JS改变页面颜色源码分享

    网络     2018-03-16    1198

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

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

<!DOCTYPE html> 

<html> 

<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 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>


原文链接:https://www.idaobin.com/archives/196.html

  分享到:  
0.2282s