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;
width: 200px;
background-color: red;
position: absolute;
bottom: 0;
right: 0;
}