js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:
[html]view plaincopy<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>Change.html</title> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <!--<linkrel="stylesheet"type="text/css"href="./styles.css">--> <scriptlanguage="javascript"> functiontest4(event){ if(event.value=="黑色"){ //获取div1 vardiv1=document.getElementById('div1'); div1.style.backgroundColor="black"; } if(event.value=="红色"){ //获取div1 vardiv1=document.getElementById('div1'); div1.style.backgroundColor="red"; } } </script> </head> <body> <divid="div1"style="width:400px;height:300px;background-color:red;">div1</div> <inputtype="button"value="黑色"onclick="test4(this)"/> <inputtype="button"value="红色"onclick="test4(this)"/> </body> </html>
test4(this)代表当前的<input相当于把它看成一个对象。
再来看一下改变css样式，代码如下：
[html]view plaincopy<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"> <html> <head> <title>Change1.html</title> <metahttp-equiv="content-type"content="text/html;charset=UTF-8"> <linkrel="stylesheet"type="text/css"href="css/Change.css"> <scriptlanguage="javascript"> functiontest4(event){ //获取样式表中所有class选择器都获得 varocssRules=document.styleSheets[0].rules; //从ocssRules中取出你希望的class varstyle1=ocssRules[0]; if(event.value=="黑色"){ //window.alert(style1.style.backgroundColor); style1.style.backgroundColor="black"; }elseif(event.value=="红色"){ style1.style.backgroundColor="red"; } } </script> </head> <body> <divid="div1"class="style1">div1</div> <inputtype="button"value="黑色"onclick="test4(this)"/> <inputtype="button"value="红色"onclick="test4(this)"/> </body> </html>
