chaihongjun.me

一段获取元素简单样式的函数代码

...
<script>
//获取元素样式属性值
function getStyle(obj,attr)    //obj:元素对象,attr:元素的样式 
{ 
if(obj.currentStyle)              //针对IE
{ 
return obj.currentStyle[attr]; 
} 
else 
{ 
return getComputedStyle(obj,false)[attr];  //针对其他浏览器
} 
} 
</script>
...

以上代码解析,使用

alert(obj.currentStyle);

这个代码在IE下运行将弹出:

一段获取元素简单样式的函数代码

在chrome下弹出:

一段获取元素简单样式的函数代码

可以看到IE下弹出的类型是object,在chrome弹出undefined,所以使用代码

if(obj.currentStyle)

来判断当前运行的是否是IE浏览器,因为object类型的逻辑为true,undefined逻辑值为false。currentStyle为IE独家使用的对象属性。

getComputedStyle则是其他浏览器支持的属性,接受两个参数,第一个为需要获取的元素,第二个可以任意设置。

参考文档:https://developer.mozilla.org/zh-CN/docs/Web/API/Window/getComputedStyle

前面的封装的代码可以简写为:

...
<script>
//获取元素样式属性值
function getStyle(obj,attr)    //obj:元素对象,attr:元素的样式 
{ 
 return obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
} 
</script>
...




知识共享许可协议本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。作者:chaihongjun»