Comments on: Get the rendered style of an element http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ Web development and Internet trends Fri, 29 Aug 2008 23:17:52 +0000 http://wordpress.org/?v=2.6.1 By: Ryan Rampersad http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-372998 Ryan Rampersad Thu, 14 Aug 2008 05:52:14 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-372998 Thank you! element.style.height didn't work out for me and this helps! Thanks! Thank you! element.style.height didn’t work out for me and this helps! Thanks!

]]> By: July 24 Updated>> Keeping us Aware of the Traps of Bill-C61 - Wiihacks - Nintendo Wii Hacks Community http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-351525 July 24 Updated>> Keeping us Aware of the Traps of Bill-C61 - Wiihacks - Nintendo Wii Hacks Community Thu, 24 Jul 2008 15:21:17 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-351525 [...] Geist's Blog /* Gets the rendered style of an element. * Credit and thanks to: Robert's Talk * Get the rendered style of an element - Robert’s talk - Web development and Internet trends * * Example usage: getStyle(document.getElementById("container"), "font-size"); */ function [...] [...] Geist’s Blog /* Gets the rendered style of an element. * Credit and thanks to: Robert’s Talk * Get the rendered style of an element - Robert’s talk - Web development and Internet trends * * Example usage: getStyle(document.getElementById(”container”), “font-size”); */ function [...]

]]> By: Keeping us Aware of the Traps of Bill-C61 - Wiihacks - Nintendo Wii Hacks Community http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-332003 Keeping us Aware of the Traps of Bill-C61 - Wiihacks - Nintendo Wii Hacks Community Mon, 07 Jul 2008 19:26:00 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-332003 [...] July 07, 2008 /* Gets the rendered style of an element. * Credit and thanks to: Robert's Talk * Get the rendered style of an element - Robert’s talk - Web development and Internet trends * * Example usage: getStyle(document.getElementById("container"), "font-size"); */ function [...] [...] July 07, 2008 /* Gets the rendered style of an element. * Credit and thanks to: Robert’s Talk * Get the rendered style of an element - Robert’s talk - Web development and Internet trends * * Example usage: getStyle(document.getElementById(”container”), “font-size”); */ function [...]

]]> By: Troy III http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-307892 Troy III Wed, 18 Jun 2008 15:15:25 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-307892 Reading this and that and those and what not, I come to one and only conclusion that is growing stronger and stronger everyday more. That IE is a Browser - FX is a ridicule - while W3C is a godamn Dogma. Reading this and that and those and what not, I come to one and only conclusion that is growing stronger and stronger everyday more.

That IE is a Browser - FX is a ridicule - while W3C is a godamn Dogma.

]]> By: Gunnar http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-288408 Gunnar Fri, 30 May 2008 13:55:50 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-288408 You saved my day! You saved my day!

]]> By: Andy http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-287484 Andy Thu, 29 May 2008 17:32:14 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-287484 Wow, this is an awesome tip! Thanks, that helped me solve a huge problem that I had been trying to figure out for a while, thanks! Wow, this is an awesome tip! Thanks, that helped me solve a huge problem that I had been trying to figure out for a while, thanks!

]]> By: Mario http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-286289 Mario Wed, 28 May 2008 15:22:50 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-286289 For top and left it returns auto which is not very useful. For top and left it returns auto which is not very useful.

]]> By: Robert Nyman http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-274581 Robert Nyman Fri, 16 May 2008 06:47:25 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-274581 picmauri, No problem at all. I'm glad to hear that it works for you now! picmauri,

No problem at all. I’m glad to hear that it works for you now!

]]> By: picmauri http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-274218 picmauri Thu, 15 May 2008 19:04:47 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-274218 Hi Robert, Now is work fine. The problem was a mismatch on the background-color value....the color value of an element with firefox is expressed with rgb (xxx,xxx,xxx) , while with IE7 the same value is expressed with #xxxxxx. However i had some error with another script. TNX and sorry for my english....I'm from Italy! Hi Robert,
Now is work fine.
The problem was a mismatch on the background-color value….the color value of an element with firefox is expressed with rgb (xxx,xxx,xxx) , while with IE7 the same value is expressed with #xxxxxx. However i had some error with another script.

TNX
and sorry for my english….I’m from Italy!

]]> By: Robert Nyman http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-273817 Robert Nyman Thu, 15 May 2008 08:36:54 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-273817 Picmauri, The script should work in IE 7, so make sure you don't have any other error in there. The commented out line is only there to handle any potential error, so you can alert the value of e, to see what error you get. Picmauri,

The script should work in IE 7, so make sure you don’t have any other error in there. The commented out line is only there to handle any potential error, so you can alert the value of e, to see what error you get.

]]> By: Picmauri http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-273793 Picmauri Thu, 15 May 2008 08:04:36 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-273793 I've tried the script on my project....with Firefox works Fine! With Explorer 7 does not works!!! .....try{ strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } catch(e){ // Used to prevent an error in IE 5.0 } ....The line "// Used to prevent an error in IE 5.0" on statement catch Why is blank? Have i to write some code in that line? I’ve tried the script on my project….with Firefox works Fine!
With Explorer 7 does not works!!!
…..try{
strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
catch(e){
// Used to prevent an error in IE 5.0
}
….The line “// Used to prevent an error in IE 5.0″ on statement catch Why is blank?
Have i to write some code in that line?

]]> By: mihai copae http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-254966 mihai copae Tue, 22 Apr 2008 14:56:14 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-254966 If you want to parse the entire css for document u can use this: <code> n=document.styleSheets[0].cssRules.length css_rules=document.styleSheets[0].cssRules i=0; while(i<n){ console.log(css_rules[i].cssText) i++; } </code> If you want to parse the entire CSS for document u can use this:

n=document.styleSheets[0].cssRules.length
css_rules=document.styleSheets[0].cssRules

i=0;
while(i<n){
console.log(css_rules[i].cssText)
i++;
}

]]> By: Robert Nyman http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-133976 Robert Nyman Wed, 07 Nov 2007 08:47:03 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-133976 iain, I'm glad it helped! :-) iain,

I’m glad it helped! :-)

]]> By: iain http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-133777 iain Wed, 07 Nov 2007 00:11:15 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-133777 Thanks for this... exactly what I needed. You absolute legend Thanks for this… exactly what I needed.

You absolute legend

]]> By: Robert Nyman http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-129012 Robert Nyman Mon, 29 Oct 2007 11:54:01 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-129012 Olle, Thanks for the info! Bernie, You need to send in <code>background-image</code> to the function, like in CSS. Alternatively, you can send in just <code>background</code> Andrei, Thank you! 1. It's a good suggestion, but it was a deliberate choice to have it return the unit as well, in case there are more than one unit in use. 2. The problem is that what is returned is the default value in the web browser, which can differ quite a lot between different web browsers. Olle,

Thanks for the info!

Bernie,

You need to send in background-image to the function, like in CSS. Alternatively, you can send in just background

Andrei,

Thank you!
1. It’s a good suggestion, but it was a deliberate choice to have it return the unit as well, in case there are more than one unit in use.
2. The problem is that what is returned is the default value in the web browser, which can differ quite a lot between different web browsers.

]]> By: Bereczki Andrei http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-128956 Bereczki Andrei Mon, 29 Oct 2007 09:05:13 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-128956 o, forgot to mention, if i set the color property in css, the border color changes to that color, even if not set ... annoying o, forgot to mention, if i set the color property in CSS, the border color changes to that color, even if not set … annoying

]]> By: Bereczki Andrei http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-128952 Bereczki Andrei Mon, 29 Oct 2007 09:03:27 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-128952 Hi, nice script, i was using something similar but this seems more browser friendly. I have a suggestion and 1 bug for you to fix (if you want of course): 1. Stripping away the 'px' from the return values would be nice to be able to use it in mathematical operation i did it the following way: if(strValue.indexOf("px") != -1){ //stripping away 'px' strValue = parseInt( strValue.slice(0, strValue.indexOf("px")) ); } return strValue; 2. There seems to be a bug with getting the border values. Even if the border is not set in css, i still get a 0px (medium in IE) and #000000 color for that border ... is this normal? Have a great day! :-) Hi, nice script, i was using something similar but this seems more browser friendly. I have a suggestion and 1 bug for you to fix (if you want of course):

1. Stripping away the ‘px’ from the return values would be nice to be able to use it in mathematical operation
i did it the following way:

if(strValue.indexOf(”px”) != -1){ //stripping away ‘px’
strValue = parseInt( strValue.slice(0, strValue.indexOf(”px”)) );
}
return strValue;

2. There seems to be a bug with getting the border values. Even if the border is not set in CSS, i still get a 0px (medium in IE) and #000000 color for that border … is this normal?

Have a great day! :-)

]]> By: elektronaut » Blog Archive » Getting computed styles in Javascript http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-98857 elektronaut » Blog Archive » Getting computed styles in Javascript Thu, 06 Sep 2007 00:42:16 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-98857 [...] computed styles in Javascript Robert Nyman has written a useful blog entry on this, you might want to read it as well. The getStyle() function is based on his, with one [...] [...] computed styles in Javascript Robert Nyman has written a useful blog entry on this, you might want to read it as well. The getStyle() function is based on his, with one [...]

]]> By: Bernie http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-93169 Bernie Mon, 20 Aug 2007 15:28:24 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-93169 This function doesn't work in Firefox with "backgroundImage". This function doesn’t work in Firefox with “backgroundImage”.

]]> By: Olle Lundberg http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-82846 Olle Lundberg Tue, 17 Jul 2007 19:24:30 +0000 http://www.robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/#comment-82846 Webkit has a bug in the way it handles the string passed to getPropertyValue() according to the spec the string passed, is case insenstive. I.e width==Width. I have created at test case and <a href="http://bugs.webkit.org/show_bug.cgi?id=14645" title="http://bugs.webkit.org/show_bug.cgi?id=14645" rel="nofollow">reported</a> it to webkit. A workaround for now is making the strCssRule lowercase. <code> function getStyle(oElm, strCssRule){ var strValue = ""; strCssRule=strCssRule.toLowerCase(); if(document.defaultView && document.defaultView.getComputedStyle){ strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule); } else if(oElm.currentStyle){ strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){ return p1.toUpperCase(); }); strValue = oElm.currentStyle[strCssRule]; } return strValue; } </code> Webkit has a bug in the way it handles the string passed to getPropertyValue() according to the spec the string passed, is case insenstive. I.e width==Width.

I have created at test case and reported it to webkit.

A workaround for now is making the strCssRule lowercase.


function getStyle(oElm, strCssRule){
var strValue = "";
strCssRule=strCssRule.toLowerCase();
if(document.defaultView && document.defaultView.getComputedStyle){
strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
}
else if(oElm.currentStyle){
strCssRule = strCssRule.replace(/-(w)/g, function (strMatch, p1){
return p1.toUpperCase();
});
strValue = oElm.currentStyle[strCssRule];
}
return strValue;
}

]]>