下面小编就为大家带来一篇js改变style样式和css样式的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link type="text/css" href="https://www.jb51.net/article/styles.css">--> <script language="javascript"> function test4(event) { if(event.value == "黑色") { //获取div1 var div1 = document.getElementById('div1'); div1.style.backgroundColor="black"; } if(event.value == "红色") { //获取div1 var div1 = document.getElementById('div1'); div1.style.backgroundColor="red"; } } </script> </head> <body> <div>div1</div> <input type="button" value="黑色"/> <input type="button" value="红色"/> </body> </html>
test4(this)代表当前的<input相当于把它看成一个对象。
再来看一下改变css样式，代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Change1.html</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link type="text/css" href="https://www.jb51.net/css/Change.css"> <script language="javascript"> function test4(event) { //获取样式表中所有class选择器都获得 var ocssRules = document.styleSheets[0].rules; //从ocssRules中取出你希望的class var style1 = ocssRules[0]; if(event.value == "黑色") { //window.alert(style1.style.backgroundColor); style1.style.backgroundColor="black"; }else if(event.value == "红色") { style1.style.backgroundColor="red"; } } </script> </head> <body> <div>div1</div> <input type="button" value="黑色"/> <input type="button" value="红色"/> </body> </html>
以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了，希望大家多多支持脚本之家~
您可能感兴趣的文章: