Page 1 of 1

Accessing styles stored in <style> or <link>

Posted: Wed Mar 21, 2007 6:57 pm
by alex.barylski
Obviously the properties are being applied...because the elements look as they should, but when I try to access say the width property of the element (defined in <link>) I get nothing...

If I use inline

Code: Select all

style="width: 100%"
Then access that style using JavaScript everything works fine...WTF am I missing?

I thought styles (regardless of origin: inline, style or external) would basically override the same founding property for that element and thus when you requested the value:

Code: Select all

document.getElementById('test').style.width
You would be returned whatever value was last used (in order of precedence, such as external, style, inline)???

What am I doing wrong here or is this the way it works? Is there anyway I can access external CSS properties short of parsing the CSS file?

Posted: Wed Mar 21, 2007 9:15 pm
by veridicus
My guess is that the style you think is being applied (from the <link>) actually isn't. Have you tried using the Firebug plugin for Firefox to see that the style is definitely being applied? You can also use Firebug to browse the DOM.

Posted: Wed Mar 21, 2007 9:37 pm
by feyd
You're looking at the elements own (directly applied) style information. What you're wanting to see is the combined inline with aggregate.

For the life of me, I can't remember the property that contains the combined style information applied.

Posted: Thu Mar 22, 2007 3:03 am
by mikeq
Had a quick look on MSDN on the style attribute

http://msdn2.microsoft.com/en-gb/library/ms534651.aspx
Remarks

This attribute is not accessible through scripting. To access styles through scripting, use the style object.
So maybe that indicates they are 2 different things, with the style object taking precedence over the style attribute if it is set.

Just a thought.

Posted: Thu Mar 22, 2007 3:04 am
by mikeq
feyd wrote:
For the life of me, I can't remember the property that contains the combined style information applied.
Does the outerHTML property of the object not contain all this information. You could then parse that for the style attribute, again just a thought.

Posted: Thu Mar 22, 2007 7:42 am
by feyd
I'm pretty sure the outerHTML property does not.

Posted: Thu Mar 22, 2007 10:32 pm
by alex.barylski
heh...so it sounds like I am *not* on drugs and these values will only be obtainable via parsing the CSS? Shyte!!! :P

feyd if you can think of that attribute or find it, please let me know :)

Posted: Fri Mar 23, 2007 1:34 am
by nickvd
I'm not in a position to easily test it at the moment, but I do recall seeing .cssText somewhere, but it could have been someone's code and not a core property.

Posted: Fri Mar 23, 2007 2:35 am
by mikeq

Posted: Fri Mar 23, 2007 2:44 am
by Kieran Huggins
The function you seek is getComputedStyle()

not even my beloved jQuery gets it right when !important overrides an inline style :-(
(it works fine the rest of the time though)

Here's a cross-browser function:

Code: Select all

function getStyle(oElm, strCssRule){
	var strValue = "";
	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;
}
usage:

Code: Select all

<a onclick="alert(getStyle(this,'color'));" style="color:red;">yo</a>
incidentally, the jQuery would be:

Code: Select all

<a onclick="alert($(this).css('color'));" style="color:red;">yo</a>

Posted: Fri Mar 23, 2007 2:51 am
by alex.barylski
Bam!!! Thanks for that, very helpful :)