我们先来看下具体的演示效果图
以下就是完整的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>
以上就是js实现页面颜色改变代码的详细内容。