javascript css函数一设置/读取对象的属性（Style对象与CurrentStyle对象、getComputedStyle）及其小案例
1、Style对象
style对象代表一个单独的样式声明，可以从应用样式的文档元素访问Style对象。style对象获取的是内联样式，即元素标签中style属性的值。
例子：
<style type="text/css">#div{color:gray;}</div> //内部样式
<div id="div" style="color:red;"></div> //内联样式
<link href="text.css" rel="stylesheet" type="text/css"> //链入式
document.getElementById('id').style.color; //值为red
2、currentStyle对象
返回所有样式声明（包括内部、外部、内联）按css层叠规则作用于元素的最终样式。
Element.currentStyle 是一个与 window.getComputedStyle方法功能相同的属性。这个属性实现在旧版本的IE浏览器中.
只有IE和Opera支持使用CurrentStyle获取的元素计算后的样式。getComputeStyle()方法可以获取当前元素所使用的css属性值。
例如：
var oBox = document.getElementById(“box”);
oBox.currentStyle[“width”]；
即
ele.currentStyle[“attr”] 或者
ele.currentStyle.attr;
var div=window.getComputeStyle(“div”,null).color;//第一个参数为目标元素，第二个参数为伪类（必需，没有伪类设为null）
与style对象的区别：
getComputeStyle()是只读，只能获取不能设置，style能读能设；
对于一个没有设定任何样式的元素，getComputedStyle()返回对象中的length属性值，而style对象中length是0。
不同的浏览器对currentStyle对象支持有差异，需要兼容处理。
优点：可以获取元素的最终样式，包括浏览器的默认值，而不像style只能获取行间样式，所以更常用到。
注意：不能获取复合样式如background属性值，只能获取单一样式如background-color等。
obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
或者
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr]
}
例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css函数——设置/读取对象的属性</title>
<style>
div{width:400px;height:200px;background:#fef4eb;border:1px solid #f60;margin:0 auto;}
input{border:0;color:#fff;cursor:pointer;font-weight:700;background:#f60;padding:2px 4px;margin:10px 0 0 10px;}
</style>
<script type="text/javascript">
function css(obj, attr, value) {
switch (arguments.length) {
case 2:
if (typeof arguments[1] == "object") { //二个参数, 如果第二个参数是对象, 批量设置属性
for (var i in attr) obj.style[i] = attr[i]
} else { //二个参数, 如果第二个参数是字符串, 读取属性值
//兼容性处理
//return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr]
if (obj.currentStyle) {
return obj.currentStyle[attr];
} else {
return getComputedStyle(obj, null)[attr]
}
}
break;
case 3:
//三个参数, 单一设置属性
obj.style[attr] = value;
break;
default:
alert("参数错误！")
}
}
window.onload = function() {
var oBox = document.getElementById("box");
var aInput = oBox.getElementsByTagName("input");
//第一个按钮点击事件
aInput[0].onclick = function() {
//两个参数, 第二个参数为字符串, 读取属性值
alert("width: " + typeof(css(oBox, "width")) + "\nheight: " + css(oBox, "height") + "\nbackground-color: " + css(
oBox,
"backgroundColor"))
};
//第二个按钮点击事
aInput[1].onclick = function() {
//两个参数, 第二个参数为对象, 属性批量设置
css(oBox, {
width: "330px",
height: "100px",
borderColor: "#0084ff",
backgroundColor: "#eff8ff"
});
//三个参数, 属性单一设置
// for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#0084ff")
}
//第三个按钮点击事件
aInput[2].onclick = function() {
//两个参数, 第二个参数为对象, 属性批量设置
css(oBox, {
width: "400px",
height: "200px",
borderColor: "#f60",
backgroundColor: "#fef4eb"
});
//三个参数, 属性单一设置
//for (i = 0; i < aInput.length; i++) css(aInput[i], "backgroundColor", "#f60")
}
};
</script>
</head>
<body>
<div id="box">
<input type="button" value="Get Style" />
<input type="button" value="Set Style" />
<input type="button" value="Default Style" />
</div>
</body>
</html>
