Comments on: Computed vs Cascaded Style http://erik.eae.net/archives/2007/07/27/18.54.15/ The Weblog of Erik Arvidsson Thu, 28 Aug 2008 23:42:21 +0000 http://wordpress.org/?v=2.6 By: xErath http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-103035 xErath Wed, 26 Mar 2008 11:53:36 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-103035 Why all the trouble of defining document.defaultView.document.defaultView.document.defaultView.document.defaultView.document.defaultView ?? use .getComputedStyle directly Why all the trouble of defining document.defaultView.document.defaultView.document.defaultView.document.defaultView.document.defaultView ??

use .getComputedStyle directly

]]> By: Melikoth http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102937 Melikoth Fri, 15 Feb 2008 13:49:39 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102937 For some reason when I use this it returns "auto" for top and left values. The object I am interrogating has no styling applied, but I was hopinh it would tell me where it was located. For some reason when I use this it returns “auto” for top and left values. The object I am interrogating has no styling applied, but I was hopinh it would tell me where it was located.

]]> By: Dimitri Glazkov http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102509 Dimitri Glazkov Wed, 29 Aug 2007 13:23:12 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102509 Sorry, I should've escaped the markup: <body> <div> <h1>Yo</h1> </div> </body> Sorry, I should’ve escaped the markup:

<body>
<div>
<h1>Yo</h1>
</div>
</body>

]]> By: Dimitri Glazkov http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102508 Dimitri Glazkov Wed, 29 Aug 2007 13:21:51 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102508 Another interesting tidbit is that computed style does not take into account margin collapse. For instance, the marginTop value reported does not necessarily represent the actual margin value in effect. Quick example: Yo Using just default styles, the computed style on body will be 8, but it's not very useful, because the effective margin is 21 (body margin collapsed in favor of h1). Another interesting tidbit is that computed style does not take into account margin collapse. For instance, the marginTop value reported does not necessarily represent the actual margin value in effect. Quick example:

Yo

Using just default styles, the computed style on body will be 8, but it’s not very useful, because the effective margin is 21 (body margin collapsed in favor of h1).

]]> By: Links for 8/6/07 [my NetNewsWire tabs] http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102354 Links for 8/6/07 [my NetNewsWire tabs] Mon, 06 Aug 2007 14:38:00 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102354 [...] erik’s weblog » Blog Archive » Computed vs Cascaded Style [...] [...] erik’s weblog » Blog Archive » Computed vs Cascaded Style [...]

]]> By: yn http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102312 yn Sat, 04 Aug 2007 04:17:55 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102312 Papandreou: In any other browser it's trivial to get the real background color, via getComputedStyle. IE is the only one that makes this a bit of a challenge. To create a cross-browser function simply check if the getComputedStyle method exists (FF, Opera, etc.), and if so use it, otherwise see if the createTextRange method exists (IE), and if so use it. A *real* challenge would be to get the cascaded value ("red", "highlight", etc.) set in external CSS in Firefox. BTW, Erik: Your article is mistaken. Opera supports .currentStyle properly, allowing you to get the cascaded style (from the article: "Only IE has a way to get the cascaded style."). Papandreou: In any other browser it’s trivial to get the real background color, via getComputedStyle. IE is the only one that makes this a bit of a challenge.

To create a cross-browser function simply check if the getComputedStyle method exists (FF, Opera, etc.), and if so use it, otherwise see if the createTextRange method exists (IE), and if so use it.

A *real* challenge would be to get the cascaded value (”red”, “highlight”, etc.) set in external CSS in Firefox.

BTW, Erik: Your article is mistaken. Opera supports .currentStyle properly, allowing you to get the cascaded style (from the article: “Only IE has a way to get the cascaded style.”).

]]> By: Papandreou http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102305 Papandreou Fri, 03 Aug 2007 14:21:38 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102305 @yn: Your getRealBackgroundColor function is really interesting. For different reasons, I've been looking for a way to get the rrggbb values corresponding to a user's CSS system colors, but I actually gave up a while ago. However, I can only get your code to work in IE. Any chance you know a cross-browser way of accomplishing this? @yn: Your getRealBackgroundColor function is really interesting. For different reasons, I’ve been looking for a way to get the rrggbb values corresponding to a user’s CSS system colors, but I actually gave up a while ago.

However, I can only get your code to work in IE. Any chance you know a cross-browser way of accomplishing this?

]]> By: Erik Arvidsson http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102298 Erik Arvidsson Mon, 30 Jul 2007 15:52:06 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102298 yn: Thanks, the queryCommandValue is a great example how to do this. yn: Thanks, the queryCommandValue is a great example how to do this.

]]> By: yn http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102297 yn Sun, 29 Jul 2007 12:52:09 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102297 Erik: It's not about finding cases where offset* and client* won't be enough, they certainly exist. It's about what's more useful to have if you had to choose one. Why would you need the pixel value of a font set in points? I really can't think of such a scenario. If you want the height of the line in pixels, which would make more sense, that's easy to do. On the other hand, I can easily think of multiple scenarios requiring the actual cascaded properties and I've been constantly bumping against these cases, as mentioned above. Btw, to answer your specific questions: function getRealBackgroundColor(el) { var oRG=document.body.createTextRange(); oRG.moveToElementText(el); var iClr=oRG.queryCommandValue("BackColor"); return "rgb("+(iClr & 0xFF)+","+((iClr & 0xFF00)>>8)+","+((iClr & 0xFF0000)>>16)+")"; } Your other question was already answered by Dean, his function can take any value in any unit (except % in some cases) and return it in pixels, it's not limited to .left, he's just using it to do the conversion. so getPixelValue(document.body,"12pt") will give you the pixel value for your font under your setup. Again, I'm not saying anything everywhere can be converted to an absolute value, I'm just saying that currentStyle is a lot more useful. Erik: It’s not about finding cases where offset* and client* won’t be enough, they certainly exist. It’s about what’s more useful to have if you had to choose one. Why would you need the pixel value of a font set in points? I really can’t think of such a scenario. If you want the height of the line in pixels, which would make more sense, that’s easy to do.

On the other hand, I can easily think of multiple scenarios requiring the actual cascaded properties and I’ve been constantly bumping against these cases, as mentioned above.

Btw, to answer your specific questions:

function getRealBackgroundColor(el) {
var oRG=document.body.createTextRange();
oRG.moveToElementText(el);
var iClr=oRG.queryCommandValue(”BackColor”);
return “rgb(”+(iClr & 0xFF)+”,”+((iClr & 0xFF00)>>8)+”,”+((iClr & 0xFF0000)>>16)+”)”;
}

Your other question was already answered by Dean, his function can take any value in any unit (except % in some cases) and return it in pixels, it’s not limited to .left, he’s just using it to do the conversion. so getPixelValue(document.body,”12pt”) will give you the pixel value for your font under your setup.

Again, I’m not saying anything everywhere can be converted to an absolute value, I’m just saying that currentStyle is a lot more useful.

]]> By: All in a days work… http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102294 All in a days work… Sun, 29 Jul 2007 01:26:17 +0000 http://erik.eae.net/archives/2007/07/27/18.54.15/#comment-102294 [...] Computed vs Cascaded Style The offset* and client* functions provide nearly everything you want for getting the pixel values, and the difference between them helps you calculate padding/border values. I’ve rarely seen anyone opt for computed style in such situations, even for FF. [...] [...] Computed vs Cascaded Style The offset* and client* functions provide nearly everything you want for getting the pixel values, and the difference between them helps you calculate padding/border values. I’ve rarely seen anyone opt for computed style in such situations, even for FF. [...]

]]>