js可实现用户对页面中的选择条件改变页面中的样式，页面样式可以通过style修饰，也可以通过css修饰，先来看一下js改变style样式，代码如下:
案例一：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>对样式的修改</title> </head> <style type="text/css"> #div1 { width: 400px; height: 300px; color: #fff; background-color: gold; } </style> <body> <div id="div1">div1</div> <input type="button" value="黑色" onclick="test4(this)" /> <input type="button" value="红色" onclick="test4(this)" /> <script language="javascript"> function test4(e) { var div1 = document.getElementById('div1'); if(e.value == "黑色") { div1.style.backgroundColor = "black"; }; if(e.value == "红色") { div1.style.backgroundColor = "red"; }; } </script> </body> </html>
案例二：
<div id="div1" class="style1">div1</div> <input type="button" value="黑色" onclick="test4(this)" /> <input type="button" value="红色" onclick="test4(this)" /> <script language="javascript"> function test4(event) { //获取样式表中所有class选择器都获得 var ocssRules = document.styleSheets[0].rules; //从ocssRules中取出你希望的class，然后以对象的方式修改样式 var style1 = ocssRules[0]; console.log(style1.style); if(event.value == "黑色") { //window.alert(style1.style.backgroundColor); style1.style.backgroundColor = "black"; } else if (event.value == "红色") { style1.style.backgroundColor = "red"; } }; </script>
一般js获取内部样式和外部样式使用getComputedStyle，以及currentStyle。
IE下获取元素的实际属性值使用currentStyle属性，getComputedStyle同currentStyle作用相同，但是适用于FF、opera、safari、chrome。但用这种方法在IE7，IE8，IE9获取元素属性值都会报错。
“DOM2级样式”增强了document.defaultView，提供了getComputedStyle()方法。这个方法接受两个参数：要取得计算样式的元素和一个伪元素字符串（例如“:after”）。如果不需要伪元素信息，第二个参数可以是null。getComputerStyle()方法返回一个CSSStyleDeclaration对象，其中包含当前元素的所有计算的样式。
出于对兼容性的考虑，故将两种获取的方法封装在同一个函数中，使其见招拆招，遇到不同的浏览器，自动采取相适应的方法：
js:
<div class="test">用来测试的div</div> <script type="text/javascript"> var test = document.getElementsByClassName('test')[0]; function getStyle(obj, attr) { if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return document.defaultView.getComputedStyle(obj, null)[attr]; } };
var result = getStyle(test, 'width');
console.log(result);
</script>
<div class="test">用来测试的div</div> <script type="text/javascript"> var test = document.getElementsByClassName('test')[0]; function getStyle(obj, attr) { return(obj.currentStyle) ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr]; } var result = getStyle(test, 'width'); console.log(result); </script>
css:
body{
height: 3000px;
position: relative;
}
.test{
height: 200px;
200px;
background-color: red;
position: absolute;
bottom: 0;
right: 0;
}