Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript reference to CSS item returns null?

Status
Not open for further replies.

jcphua

Programmer
Feb 26, 2001
5
AU
Here's a simple example of the problem I have:

Code:
<html>
<head>
	<title></title>
	<style>
		div#eg1 { background-color: red; }
	</style>
	<link href=&quot;./eg3.css&quot; rel=&quot;STYLESHEET&quot;></link>
		<!-- div#eg3 { background-color: orange; } -->
</head>

<body>

<div id=&quot;eg1&quot;>1. 
<script>
	document.write(&quot;'&quot; + document.getElementById('eg1').style.backgroundColor + &quot;'&quot;);
</script>
</div>

<div id=&quot;eg2&quot; style=&quot;background-color: yellow;&quot;>2. 
<script>
	document.write(&quot;'&quot; + document.getElementById('eg2').style.backgroundColor + &quot;'&quot;);
</script>
</div>

<div id=&quot;eg3&quot;>3. 
<script>
	var chk = (document.styleSheets[0].cssRules)? document.styleSheets[0].cssRules : document.styleSheets[0].rules
	document.write(&quot;'&quot; + chk[0].style.color + &quot;'&quot;);
</script>
</div>
</body>
</html>

I have had several occasions where I had to return the value contained in the CSS definition for the tag (ie. eg1), and could not, so had to resort to doing eg2, which is quite obviously very annoying.

I thought eg3 should work as well, but was surprised to find it didn't either.

This example problem I've replicated in IE6PC and Mozilla1.4PC to ensure you inquisitive types can replicate the issue.

Can anybody help me?
 
I believe you may be able to reference them through document.stylesheets collection.
I'm afraid I know no more than that, so maybe try a search....

Hope I helped / Thanks for helping
if ((Math.abs(x)<10&&Math.abs(y)<10) && (((parseInt(Math.abs(x).toString()+Math.abs(y).toString())-Math.abs(x)-Math.abs(y))%9)!=0)) {alert(&quot;I'm a monkey's uncle&quot;);}
 
hmm...

Seems I didn't write the code properly, and it also seems I had the answer all along. :
But in any case, thanks for your efforts HellTel.

First of all for eg3, I wrongly stated the wrong attribute to output-- color instead of backgroundColor.

Basically the main issue though is that you *do* have to reference stylesheets as:
Code:
document.styleSheets[0].rules[0].style.backgroundColor
instead of
Code:
document.getElementById('eg1').style.backgroundColor

So the real answer is 'refer to the source of the information', not 'refer to the item using the information'.

 
hmmm hmmm...

And it seems I *didn't* answer my question after all. :
I do believe I have to elaborate my predicament to everybody else, as well as myself:--

When a page loads, the CSS is correctly referenced like it should when the page is generated by the Browser.

If you try to reference the CSS via JavaScript just after the page is loaded, then the value returned is null.

Only when you visually alter the DHTML on the Web Page, does Javascript then correctly retrieve the value stored in the CSS.

That's hopefully a better description of what I'm hoping to get answered.
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top