我们先来看下具体的演示效果图
以下就是完整的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>
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
如何使用ngrok+express解决微信接口调试问题
如何使用element-ui表格实现单元格可编辑
如何使用vue-cli编写vue插件
以上就是在js中如何改变页面颜色（详细教程）的详细内容。