我们都用过 jQuery 的
方法,其底层运作就应用了 getComputedStyle 以及 getPropertyValue 方法。
- CSS()
对于那些只想混口饭吃的人来讲,晓得
如何使用就足够了。对于希望在 JS 道路上越走越远的来人说,简单了解一些 JS 库底层实现对自己的学习很有帮助。可能谈不上信手拈来的使用,至少对创造一些创意新颖的新技术拓宽了思路。
- CSS()
jQuery 为何受欢迎,其中原因之一就是方法名称比较短。好比打架一样,块头大的潜意识认为厉害,就不由得心生畏惧,退避三舍;小个子(或村妇,小孩)嘛,自然以为是软豆腐,愿意接受作为对手。
因此,当看到类似
这么长的方法名的时候,我们身体里那个懒惰小人突然就醒了:哎哟哟,这东西,就跟放心食品一样,几年才见一回。看上去又蛮复杂,想到晚上还要跟妹子聊天。这东西,就让它从旁边过吧,反正不会掉块肉的。
- getComputedStyle
网上不是有这么个段子嘛:可怕的是,比你聪明的人比你更勤奋。那么,这里的 "勤奋" 的差异体现在什么地方呢?就拿这个
举例:懒惰青年是看一下,立马像看见凤姐一样视线离开;普通青年是看一下,发现自己不了解,百一下或谷一下,熟悉了解之;勤奋青年是不仅了解,还抽出时间实践之(如做个简单 demo 测试),熟悉方法的特异性,验证一些观点正确性。
- getComputedStyle
您可以按照你现在的心理状态看看你是哪类青年:如果此时,您已经对本文的内容没有兴趣了(当然,您的工作与 JS 关系亲密),您是……(你懂的);如果您看完本文内容,发现,还是有不少收获,心中回味下,然后 ctrl+w 去其他地方觅食,不再回来,那您是普通青年;如果您看完本文,然后对所说的一些内容作了额外的测试,例如 IE9 浏览器是否支持测试等,并通过评论形式指出可能的错误,不得不说您是勤奋青年,假以时日,必有一番技术作为。从我文章的些评论来看,有不少同行就是这样的勤奋人儿。
の, 好久没写文章,话又多了,打住,进入正题。
是一个可以获取当前元素所有最终使用的 CSS 属性值。返回的是一个 CSS 样式声明对象 ([object CSSStyleDeclaration]),只读。
- getComputedStyle
语法如下:
- var style = window.getComputedStyle("元素", "伪类");
例如:
- var dom = document.getElementById("test"),
- style = window.getComputedStyle(dom , ":after");
就两个参数,大家都懂中文的,没什么好说的。只是额外提示下:Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) 之前,第二个参数 "伪类" 是必需的(如果不是伪类,设置为
),不过现在嘛,不是必需参数了。
- null
我们使用
也可以获取元素的 CSS 样式声明对象,但是其与
- element.style
方法还有有一些差异的。
- getComputedStyle
方法是只读的,只能获取样式,不能设置;而
- getComputedStyle
能读能写,能屈能伸。
- element.style
方法获取的是最终应用在元素上的所有 CSS 属性对象(即使没有 CSS 代码,也会把默认的祖宗八代都显示出来);而
- getComputedStyle
只能获取元素
- element.style
属性中的 CSS 样式。因此对于一个光秃秃的元素
- style
,
- <p>
方法返回对象中
- getComputedStyle
属性值(如果有)就是
- length
(据我测试 FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而
- 190+
就是
- element.style
。
- 0
如果我们查看 jQuery 源代码,会发现,其
方法实现不是使用的
- css()
而是
- window.getComputedStyle
,唷?这是怎么一回事?
- document.defaultView.getComputedStyle
实际上,使用
基本上是没有必要的,
- defaultView
本身就存在
- getComputedStyle
对象之中。根据的说法,使用
- window
可能一是人们不太乐意在 window 上专门写个东西,二是让 API 在 Java 中也可用(这我不懂,忘指点~~)。
- defaultView
不过有个特殊情况,在 FireFox3.6 上不使用
方法就搞不定的,就是.
- defaultView
对于桌面设备:
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
基本支持 | 9 | ||||
伪类元素支持 |
对于手机设备:
Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile | |
---|---|---|---|---|---|
基本支持 | WP7 Mango | ||||
伪元素支持 | ? | ? | ? | ? |
上面打问号的表示没有测试,是否兼容不知。如果您方便测试,欢迎将测试结果告知,这里将及时更新,并附上您的姓名,以谢您做的贡献。
我们先把注意力放在桌面设备上,可以看到,
方法 IE6~8 是不支持的,得,背了半天的媳妇,发现是孙悟空变的——郁闷了。不急,IE 自有自己的一套东西。
- getComputedStyle
是 IE 浏览器自娱自乐的一个属性,其与
- currentStyle
可以说是近亲,至少在使用形式上类似,
- element.style
,差别在于
- element.currentStyle
返回的是元素当前应用的最终 CSS 属性值(包括外链 CSS 文件,页面中嵌入的
- element.currentStyle
属性等)。
- <style>
因此,从作用上将,
方法与
- getComputedStyle
属性走的很近,形式上则
- currentStyle
与
- style
走的近。不过,
- currentStyle
属性貌似不支持伪类样式获取,这是与
- currentStyle
方法的差异,也是 jQuery
- getComputedStyle
方法无法体现的一点。
- css()
//zxx: 如果你只知 jQuery css() 方法,你是不会知道伪类样式也是可以获取的,虽然部分浏览器不支持。
例如,我们要获取一个元素的高度,可以类似下面的代码:
- alert((element.currentStyle? element.currentStyle : window.getComputedStyle(element, null)).height);
您可以狠狠地点击这里:
结果 FireFox 下显示
(经过计算了), 而 IE 浏览器下则是 CSS 中的
- 24px
属性值:
- 2em
方法与
- getComputedStyle
属性其他具体差异还有很多,我以一个普通按钮做元素,遍历了其中靠谱的属性名和属性值,您可以狠狠地点击这里:
- currentStyle
仔细对比查看,我们可以看到不少差异,例如浮动属性,FireFox 浏览器下是这个 (
):
- cssFloat
IE7 浏览器下则是
:
- styleFloat
而 IE9 浏览器下则是
和
- cssFloat
都有。
- styleFloat
等其他 N 多差异。
方法可以获取 CSS 样式申明对象上的属性值(直接属性名称),例如:
- getPropertyValue
- window.getComputedStyle(element, null).getPropertyValue("float");
如果我们不使用
方法,直接使用键值访问,其实也是可以的。但是,比如这里的的
- getPropertyValue
,如果使用键值访问,则不能直接使用
- float
,而应该是
- getComputedStyle(element, null).float
与
- cssFloat
,自然需要浏览器判断了,比较折腾!
- styleFloat
使用
方法不必可以驼峰书写形式(不支持驼峰写法),例如:
- getPropertyValue
;
- style.getPropertyValue("border-top-left-radius")
兼容性
方法 IE9 + 以及其他现代浏览器都支持,见下表:
- getPropertyValue
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
基本支持 | 9 |
OK,一涉及到兼容性问题 (IE6-8 肿么办),感觉头开始微微作痛了~~,不急,IE 自由一套自己的套路,就是
方法。
- getAttribute
在老的 IE 浏览器(包括最新的),
方法提供了与
- getAttribute
方法类似的功能,可以访问 CSS 样式对象的属性。用法与
- getPropertyValue
类似:
- getPropertyValue
- style.getAttribute("float");
注意到没,使用
方法也不需要
- getAttribute
与
- cssFloat
的怪异写法与兼容性处理。不过,还是有一点差异的,就是属性名需要驼峰写法,如下:
- styleFloat
- style.getAttribute("backgroundColor");
如果不考虑 IE6 浏览器,貌似也是可以这么写:
- style.getAttribute("background-color");
实例才是王道,您可以狠狠地点击这里:
结果 FireFox 下一如既往的 rgb 颜色返回 (Chrome 也是返回 rgb 颜色):
对于 IE9 浏览器,虽然应用的是
, 但是从结果上来讲,
- currentStyle
返回的对象是完全支持
- currentStyle
方法的。
- getPropertyValue
从长相上看
与
- getPropertyCSSValue
是近亲,但实际上,
- getPropertyValue
要顽劣的多。
- getPropertyCSSValue
方法返回一个 CSS 最初值 (CSSPrimitiveValue) 对象 (width, height, left, …) 或 CSS 值列表 (CSSValueList) 对象(backgroundColor, fontSize, …),这取决于
- getPropertyCSSValue
属性值的类型。在某些特别的 style 属性下,其返回的是自定义对象。该自定义对象继承于 CSSValue 对象(就是上面所说的
- style
以及
- getComputedStyle
返回对象)。
- currentStyle
方法兼容性不好,IE9 浏览器不支持,Opera 浏览器也不支持(实际支持,只是老是抛出异常)。而且,虽然 FireFox 中,
- getPropertyCSSValue
对象支持
- style
方法,但总是返回
- getPropertyCSSValue
. 因此,目前来讲,
- null
方法可以先不闻不问。
- getPropertyCSSValue
有了 jQuery 等优秀库,我们有熟悉底层的
方法的必要吗?
- getComputedStyle
实际上,本文一直没有深入展开
方法一个很重要的,类似
- getComputedStyle
方法没有的功能——获取伪类元素样式。但从这一点上将,熟悉
- css()
方法有必要。
- getComputedStyle
下一篇文章,我就将介绍如何实现
方法在伪类元素上的特异功能,实现 CSS3 media queries 下一些 JS 交互,及实际应用。
- getComputedStyle
well, 开篇已经啰哩吧嗦不少内容了,这里就不再讲废话了。行文匆忙,文中难免有表述不准确之处,欢迎指正。欢迎补充,感谢阅读,希望本文的内容能够对您的学习有所帮助。
来源: