JS怎么改变当前页面的颜色

来源：成节情感

这次给大家带来JS怎么改变当前页面的颜色，JS改变当前页面颜色的注意事项有哪些，下面就是实战案例，一起来看一下。

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

以下就是完整的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> 
 <p 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()"> 
 </p> 
</body> 
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！