获取行间样式style
<!DOCTYPE html>
<html>
<head>
<title>获取行间样式</title>
<script>
window.onload=function(){
oDiv=document.getElementById("div1");
alert(oDiv.style.width);
}
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>
获取元素的当前样式currentStyle(ie)和getComputedStyle(非ie) 兼容方法
<!DOCTYPE html>
<html>
<head>
<title>获取样式兼容写法</title>
<script>
function getStyle(obj,name){
if(obj.currentStyle){
return obj.currentStyle[name];
}else{
return getComputedStyle(obj)[name];
}
}
window.onload=function(){
oDiv=document.getElementById("div1");
// alert(getStyle(oDiv,"width"));
alert(getStyle(oDiv,"background"));
// alert(getStyle(oDiv,"backgroundColor"))
}
</script>
</head>
<body>
<div id="div1" style="width:100px; height:100px; background:#f00;"></div>
</body>
</html>
运行结果：
从上面代码的运行结果我们可以看出来background返回的并不是#f00而是一个复合样式，所以遇见像background等复合样式的时候要特殊处理，在这里可以用backgroundColor。
- 复合样式 background、border...
- 单一样式 width、height、position
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。