assigning color attribute to a variable

@RamanJrMar 05.2009

i see many examples of changing a css attribute in javascript like
document.getElementById(‘elementname’).style.color = ‘white’;

how can i get the value of the color of an element and assign it to a variable?
For example:

var tmpColor;

tmpColor = document.getElementById(‘elementname’).style.color;

tmpColor = document.getElementById(‘elementname’).style.backgroundColor

Thanks in advance for any suggestions.

to post a comment

JavaScript

@Syphon101Mar 05.2009 — #[CODE]document.getElementById(“ ”).style.color=”white”;[/CODE]

@RamanJrauthorMar 05.2009 — #Thanks very much for your response Syphon.

What I am looking for is why this code snippet returns the correct value for the variable foreColor when i set the value for background color in javascript:

var currDiv;

var foreColor;

currDiv= document.getElementById("myDiv");

[B]currDiv.style.backgroundColor='white';[/B]

[B]foreColor = currDiv.style.backgroundColor;[/B]

alert(foreColor);

But when i set the background color in an external css file instead of javascript, the following code snippet returns a blank value for variable foreColor:

var currDiv;

var foreColor;

currDiv= document.getElementById("myDiv");

[B]foreColor = currDiv.style.backgroundColor;[/B]

alert(foreColor);

Thanks.

@FangMar 05.2009 — #This sets the inline styleforeColor = currDiv.style.backgroundColor;
External or embedded has to be retrieved using a different method:

function getCSSProp (element, prop) {
 if (element.style[prop]) {
 // inline style property
 return element.style[prop];
 } else if (element.currentStyle) {
 // external stylesheet for Explorer
 return element.currentStyle[prop];
 } else if (document.defaultView &amp;&amp; document.defaultView.getComputedStyle) {
 // external stylesheet for W3C browsers
 return document.defaultView.getComputedStyle(element,null).getPropertyValue(prop);
 }
 }

This function attempts to retrieve a value. For most properties it works correctly, but for hyphenated properties (i.e. background-color) most browsers require (Fx, Safari and Chrome) [I]background-color[/I], others (IE and Opera) [I]backgroundColor[/I].

Another problem is the returned color can be a rgb value or the actual color name or value that was set.

Very messy

@RamanJrauthorMar 05.2009 — #many thanks for your response fang.

I got it.

assigning color attribute to a variable

4 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

assigning color attribute to a variable

4 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

4 Comments(s) _↴

Also in #JavaScript _↴