**
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>
271
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
