Most JS frameworks and libraries I’ve seen have a function similar to this:
function getStyle(el, prop) {
if (document.defaultView && document.defaultView.getComputedStyle) {
return document.defaultView.getComputedStyle(el, null)[prop];
} else if (el.currentStyle) {
return el.currentStyle[prop];
} else {
return el.style[prop];
}
}So what is wrong with this you might ask? Lets add some background and then
we can get back to that question.
Computed Style
Computed style represents the actual computed value of a style in absolute
units. For example ’100px’ (for width) or ‘left’ (for text-align). The computed
value is never ‘auto’, ‘inherit’, ’50%’, ‘smaller’, ’1.5em’ etc. These values are
relative to something and the browser needs to convert these values to absolute
values first.
Cascaded Style
Cascaded style is the real style value that is applied to an element when the
style value is set to ‘inherit’. Inherit means that it should get its value from
the first ancestor that has a non ‘inherit’ value. A few CSS properties have
their value set to ‘inherit’ by default. Most common of these are probably
‘color’ and ‘font-size’. If you change the font size of a paragraph you want the
links in the paragraph to change their font size as well.
Inline Style
Inline style is the style value you have added to the style attribute on you
element or the style properties you have set in script using
element.style.propertyName.
Example
<style>
div {
width: 500px;
font-size: 12px;
}
p {
width: 50%;
font-size: 1em;
}
a {
font-size: inherit;
}
</style>
<div>
<p>Some text with <a id=a href=#>a link</a>.
More <b style="font-size:150%">text</b></p>
</div>| Computed Style | Cascaded Style | Inline Style | |
|---|---|---|---|
| p width | “250px” | “50%” | “” |
| p fontSize | “12px” | “1em” | “” |
| a fontSize | “12px” | “1em” | “” |
| b fontSize | “18px” | “150%” | “150%” |
Browser Support
All browsers except IE has a way to get the computed style. The way to do
this is to use document.defaultView.getComputedStyle. Only IE has a way to get
the cascaded style. This is done using element.currentStyle.
All browsers supports getting the inline style (even IE4) but inline style is
not that interesting because it is empty unless you already set it, and in that
case you don’t really need to query it.
Conclusion
Back to our earlier question. What is wrong with our getStyle function? It
should be pretty obvious now. It will give very different and sometimes
unexpected results depending both on browsers and on the value set by the page
author and even worse, set by user style sheets.
So how do we solve this? We stop supporting IE of course… seriously, with
the market share IE has that is not an option. The best solution is to remove
functions like these from shared code and instead add more specific functions.
One can for example, often calculate the computed value based on the cascaded
value and the ancestors. A good example of that is ‘visibility’. Computing that
is pretty easy. If the value is ‘inherit’ check the parents until a non inherit
value is found. For things like left, width etc you will be better of using
offsetLeft, offsetWitdh etc. There are a lot of cases and sometimes it is just
not possible (or requires iterative testing with different absolute sized
elements).
Comments
Override style
There is one more style type that is worth mentioning and that is the
override style. This is called document.defaultView.getOverrideStyle in the W3C
DOM and element.runtimeStyle in IE. It allows you to override the style property
in such a way that it has (a) highest priority and (b) not serialized from the
DOM when you do things like cssText and innerHTML. getOverrideStyle is not
supported in Gecko so it is still only useful to IE specific code.
It is a bit strange to me that the W3C DOM never added a way to get the
cascaded style. The usecases for this are few but they do exists.
What is even more strange is that MS did not realize the need for a way to
get the compouted style back in the days when they believed in Trident as a
platform.
Pingback: All in a days work…()
Pingback: Links for 8/6/07 [my NetNewsWire tabs]()
Pingback: Things you should know when not using a JS library « Lea Verou()
Pingback: Dean Edwards: Convert any colour value to hex in MSIE()
Pingback: 超酷带纹理网页滚动条效果 « 酷码资源–帮助你收集一些常用、经典、不易记的代码与技巧 PHP代码 ASP代码 精选JS代码 WORDPRESS 网站SEO Flash焦点广告 JS焦点广告 CSS技巧()
Pingback: Convert any colour value to hex in MSIE « DesignerLinks()
Pingback: Let’s Make a Framework: CSS Manipulation | tips & tricks()
Pingback: js现实网页滚动条效果 | 宝典网()
Pingback: Computed vs Cascaded Style | Neekey的个人小博客()
Pingback: Styles and classes, getComputedStyle | ss's space()