**
JS读取内联样式 并解决浏览器兼容性问题
**
<html>
<head>
<title></title>
<style type="text/css">
#box01{
width:200px;
height:500px;
background-color:red; /*!important优先级最高*/
}
</style>
<script type="text/javascript">
window.onload = function(){
var box01 = document.getElementById("box01");
var btn01 = document.getElementById("btn01");
//通过style设置和读取的都是内联样式,内联样式优先级比较高,会立即显示
box01.style.width="1000px";
btn01.onclick=function(){
box01.style.backgroundColor="yellow";
//获取元素当前显示的样式
//①IE浏览器:元素.currentStyle.样式
//②IE9以上及主流浏览器:getComputedStyle(元素,null).样式
//第②个可以得到真实的值,比如没有设置width,会获得默认的width值,而第①个可能是auto。
//解决兼容性问题
var x = getStyle(box01,"width");
alert(x);
}
/*
定义函数获取指定元素的当前样式
obj 要获取样式的元素
name 要获取的样式名
*/
}
function getStyle(obj,name){
//正常浏览器
if(window.getComputedStyle)
return getComputedStyle(obj,null)[name]; //name是一个变量,.name表示获取样式名为name的样式,[name]获取变量表示的样式名
//IE8及以下
else{
return obj.currentStyle[name];
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<div id="box01"></div>
</body>
</html>