在JS中如何改变页面颜色(详细教程)
程序员文章站
2022-03-25 22:44:16
...
本篇文章是JS的一个网页制作小技巧,应用在很多地方,通过JS改变HTML页面的颜色,有兴趣的学习下。
我们先来看下具体的演示效果图
以下就是完整的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中如何改变页面颜色(详细教程)的详细内容,更多请关注其它相关文章!
上一篇: 用HTML+CSS实现下拉菜单
推荐阅读
-
在node.js中多个异步过程中如何判断执行是否完成(详细教程)
-
在vue中如何使用cropperjs的方法(详细教程)
-
如何改变pdf字体颜色?pdf字体颜色修改的详细教程
-
如何插入js,引用外部js,js在页面中的位置
-
在vue中如何使用cropperjs的方法(详细教程)
-
在Vue组件中如何使用 TypeScript的方法(详细教程)
-
一个有趣的JS随机效果文本-定时的从一段文本中随机选择一个字符,改变颜色。可以学习一下JS。_PHP教程
-
一个有趣的JS随机效果文本-定时的从一段文本中随机选择一个字符,改变颜色。可以学习一下JS。_PHP教程
-
在vuejs中如何实现递归树型菜单组件(详细教程)
-
如何改变pdf字体颜色?pdf字体颜色修改的详细教程