获取元素样式

获取元素当前样式

getStyle(obj, styleName)

写这篇文章的目的是为了拿到当前元素的现有的样式,直接的element.style只能拿到行内样式,无法拿到渲染完成结果的样式,所以用这么一个小方法来实现

DOM标准里有一个全局方法getComputedStyle,这个方法可以获取当前对象的全部样式(包括通过class属性饮用的外部样式表带入的样式等等非行内样式),使用方法如:getComputedStyle(obj,null).width,拿到的就是obj的width(结果是字符串,如:'100px',哪怕你给的是em,输出的结果依然是px单位的)。

但事情远没有这么简单,毕竟我们是生活在有IE的世界里,所以IE有另外一个自己的方法,就是currentStyle,不同于全局方法getComputedStyle,它是作为DOM元素属性存在的,也就是说,同样是拿宽度,使用方法是:obj.currentStyle.width(IE里如果用的是em的话那么出来的结果也是em的)。

为了保证兼容性,所以要写:

obj.currentStyle || getComputedStyle(obj,null)

这样就能获取到对象的现有样式表,是个大对象,但是属性名是驼峰的,在float属性上,FF浏览器是cssFloat,而IE7是styleFloat,IE9是两个都可能有,这样的兼容性就不好调了,但是我们还有一个方法,就是getPropertyValue,可以直接写属性名,这个方法IE9+以上都支持。
不过既然说了是IE9+,那么678我们不能不管啊,678还有一个方法,就是getAttrbute方法,getAttrbute方法提供了和getPropertyValue方法类似的功能,用法还与getPropertyValue类似。不过IE6依然是驼峰写法,如果你抛弃了IE6,那么新世界大门就打开了。
最终的封装方法就是这样了:

function getStyle(obj, styleName) {
    var oStyle = obj.currentStyle ? obj.currentStyle : window.getComputedStyle(obj, null);
    if (oStyle.getPropertyValue) {
        return oStyle.getPropertyValue(styleName);
    } else {
        return oStyle.getAttrbute(styleName);
    }
}

此方法不支持IE6。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 上篇文章讲到如何设置元素样式,本文将继续给大家分享如何获取元素样式。 一、style,只获取标签上定义的行内样式 ...
    前端王睿阅读 10,887评论 0 6
  • 获取元素的某一个具体的样式属性值 元素.style.属性名这需要把元素的样式都写在行内样式上,写在样式表(css)...
    阿九是只大胖喵阅读 2,490评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,682评论 1 92
  • 第一章 荧惑守心 始皇三十六年,一颗火星坠落到了东郡,化成了石块,其中有人在石头上刻字,书为...
    沐芊落阅读 2,948评论 0 0
  • 打从知道“旅行”这个概念的时候,就梦想着去看一看大海。高中时,一直憧憬着大学,觉得大学有时间有精力有金钱。到了大学...
    waiting杨同学阅读 3,904评论 0 8