js改变style样式和css样式的简单实例
js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下：
<!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样式，代码如下：
<!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>
以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了，希望大家多多支持毛票票~