js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:
<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";
}
}
test4(this)代表当前的
再来看一下改变css样式,代码如下:
<link rel="stylesheet" type="text/css" href="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";
}
}