ホームページ >ウェブフロントエンド >htmlチュートリアル >element_html/css_WEB-ITnose の CSS 値を取得する getComputedStyle メソッドに精通している
getComputedStyle は、現在の要素の最終的に使用された CSS 属性値をすべて取得できるメソッドです。返されるのは、読み取り専用の CSS スタイル宣言オブジェクト ([object CSSStyleDeclaration]) です。 getComputedStyle()は、要素のすべてのCSSプロパティの最終的な使用値を示しています。中国人、言うのは簡単なことではありません。追加のリマインダー: Gecko 2.0 (Firefox 4 / Thunderbird 3.3 / SeaMonkey 2.1) より前では、2 番目のパラメーター「擬似クラス」が必須でした (擬似クラスでない場合は、null に設定します)。しかし、現在は必須です。必須パラメータではありません。
3. getComputedStyle と style の違い
element.style を使用して要素の CSS スタイル宣言オブジェクトを取得することもできますが、getComputedStyle メソッドとはいくつかの違いがあります。
読み取り専用および書き込み可能
前述したように、getComputedStyle メソッドは読み取り専用で、スタイルを取得することのみができますが、設定することはできません。
取得されるオブジェクトのスコープ getComputedStyle メソッドは、要素に最終的に適用されるすべての CSS 属性オブジェクトを取得します (CSS コードがない場合でも、デフォルトの祖先の 8 世代が表示されます)。 style 属性で要素 CSS スタイルを取得します。したがって、ベア要素 e388a4556c0f65e1904146cc1a846bee の場合、オブジェクトの getComputedStyle メソッドによって返される長さ属性値 (存在する場合) は 190 以上です (私のテストによると、FF: 192、IE9: 195、Chrome: 253、結果は環境によっては異なる場合があります)、element.style は 0 です。
4. getComputedStyle とdefaultView
Chrome
Firefox (Gecko)
Internet Explorer
Safari
基本サポート | 9 | ||||
---|---|---|---|---|---|
Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile |
WP7 Mango | |||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
? | ? |
Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari | |
---|---|---|---|---|---|
基本支持 | 9 |
OK,一涉及到兼容性问题(IE6-8肿么办),感觉头开始微微作痛了~~,不急,IE自由一套自己的套路,就是getAttribute方法。
在老的IE浏览器(包括最新的),getAttribute方法提供了与getPropertyValue方法类似的功能,可以访问CSS样式对象的属性。用法与getPropertyValue类似:
style.getAttribute("float");
注意到没,使用getAttribute方法也不需要cssFloat与styleFloat的怪异写法与兼容性处理。不过,还是有一点差异的,就是属性名需要驼峰写法,如下:
style.getAttribute("backgroundColor");
如果不考虑IE6浏览器,貌似也是可以这么写:
style.getAttribute("background-color");
实例才是王道,您可以狠狠地点击这里:getPropertyValue和getAttribute获取背景色demo
结果FireFox下一如既往的rgb颜色返回(Chrome也是返回rgb颜色):
对于IE9浏览器,虽然应用的是currentStyle, 但是从结果上来讲,currentStyle返回的对象是完全支持getPropertyValue方法的。
从长相上看getPropertyCSSValue与getPropertyValue是近亲,但实际上,getPropertyCSSValue要顽劣的多。
getPropertyCSSValue方法返回一个CSS最初值(CSSPrimitiveValue)对象(width, height, left, …)或CSS值列表(CSSValueList)对象(backgroundColor, fontSize, …),这取决于style属性值的类型。在某些特别的style属性下,其返回的是自定义对象。该自定义对象继承于CSSValue对象(就是上面所说的getComputedStyle以及currentStyle返回对象)。
getPropertyCSSValue方法兼容性不好,IE9浏览器不支持,Opera浏览器也不支持(实际支持,只是老是抛出异常)。而且,虽然FireFox中,style对象支持getPropertyCSSValue方法,但总是返回null. 因此,目前来讲,getPropertyCSSValue方法可以先不闻不问。
有了jQuery等优秀库,我们有熟悉底层的getComputedStyle方法的必要吗?
实际上,本文一直没有深入展开getComputedStyle方法一个很重要的,类似css()方法没有的功能??获取伪类元素样式。但从这一点上将,熟悉getComputedStyle方法有必要。
下一篇文章,我就将介绍如何实现getComputedStyle方法在伪类元素上的特异功能,实现CSS3 media queries下一些JS交互,及实际应用。
well, 开篇已经?哩吧嗦不少内容了,这里就不再讲废话了。行文匆忙,文中难免有表述不准确之处,欢迎指正。欢迎补充,感谢阅读,希望本文的内容能够对您的学习有所帮助。