Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

获取元素计算后样式的浏览器兼容差异

  在IE中,我们很容易实现,因为IE提供了currentStyle这个属性,这个属性IE9是可以兼容的,IE10没测试。用法和style基本一样,只不过有一些特殊的写法是不支持的,比如设置了边框,可是你无法使用border来获取边框,你应使用borderLeftWidth、borderLeftColor类似这样详细的属性去获取。 <!DOCTYPE html>
<style>
div {
  width:100px;height:100px;
  border:1px solid #CCC;
  font:14px/100px 微软雅黑;
  text-align:center;
}
</style>
<div>次碳酸钴</div>
<script>
var div=document.getElementsByTagName("div")[0];
alert(div.currentStyle.width);
</script>

  上面就是这个代码的运行效果,要记住直接获取样式的数值一般是带有单位的,别直接做数学运算造成NaN。如果不需要单位可以用offsetWidth来获取宽度,但是这个会计算边框和内补丁。或者用个parseInt把单位去掉。
  以上就是IE上获取计算后样式的方法,接下来说说非IE浏览器。就拿Chrome来说,它没有currentStyle这个属性,我们要获取计算后的样式需要用到一个叫做getComputedStyle的方法,它是window的方法所以我可以直接当作普通函数来使用。新版本的方法还可以直接获取border这样的CSS,它会返回一堆东西,我是不建议这样获取样式的,还是逐个获取比较实在,这个我就不做示范了。下面看代码,之后的代码HTML部分和第一个例子中的相同,我只写JS部分。 var div=document.getElementsByTagName("div")[0];
alert(getComputedStyle(div).width);

  这个方法在IE9中也是兼容的,所以IE9中获取元素计算后的样式可以用旧版本浏览器的方法,也可以用新方法。不过这个获取计算后样式的方法获取到的东西和旧版的方法有点不同,比如颜色值用getComputedStyle方法获取的是RGB格式的值,但是用旧版方法获取就只能得到十六进制的值。 var div=document.getElementsByTagName("div")[0];
var c1=div.currentStyle.borderLeftColor;
var c2=getComputedStyle(div).borderLeftColor;
alert(c1+"\n"+c2);

  其它还有什么可说的吗?我也想不到了,如果有问题就到提问频道问问神奇的海螺吧~
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^