Accessing styles stored in <style> or <link>

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Accessing styles stored in <style> or <link>

Post 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?
User avatar
veridicus
Forum Commoner
Posts: 86
Joined: Fri Feb 23, 2007 9:16 am

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post 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.
User avatar
mikeq
Forum Regular
Posts: 512
Joined: Fri May 03, 2002 3:33 am
Location: Edinburgh, Scotland

Post 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.
User avatar
mikeq
Forum Regular
Posts: 512
Joined: Fri May 03, 2002 3:33 am
Location: Edinburgh, Scotland

Post 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.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I'm pretty sure the outerHTML property does not.
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post 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 :)
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post 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.
User avatar
mikeq
Forum Regular
Posts: 512
Joined: Fri May 03, 2002 3:33 am
Location: Edinburgh, Scotland

Post by mikeq »

User avatar
Kieran Huggins
DevNet Master
Posts: 3635
Joined: Wed Dec 06, 2006 4:14 pm
Location: Toronto, Canada
Contact:

Post 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>
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

Bam!!! Thanks for that, very helpful :)
Post Reply