View Full Version : Getting a style value from a element that use a class?!

Rune Carlsen
09-11-2004, 08:51 PM
I have a element that uses a class, like:
<style id="abc" class="myClass" onClick="test(id)">....</span>

The function:

function test(id) {

Why doesn't this work?
It returns nothing, but the class, which the element uses, has a background-color value set... ?!?!?!

Am i missing something... ?


09-11-2004, 09:31 PM
There are a few things in that code snippet that I can say are wrong.

First of all, there is not onclick attribute for the style element. Did you mean span and not style?

Second, you should use this.id and not just id in your event handler.

Third, the element.style property only contains styles that are set through one of two methods: Either in the style attribute of the element, or through the element.style from a script. It does not contain any properties from embedded or external stylesheets (the style and link elements). If you want to access all the styles set on an element, there are two methods. One as specified in the DOM, one proprietary in iew:

// DOM way

// IE way

Rune Carlsen
09-12-2004, 10:16 AM
Yes, I ment "span" of course.
Sorry for that, just a example code.

So, are you saying that there is NO way to get the values set in a class? (embedded)


Willy Duitt
09-12-2004, 12:17 PM
So, are you saying that there is NO way to get the values set in a class? (embedded)

No, Liorean pointed out that there is two ways to accomplish this... For Mozilla based browsers you must use defaultView.getComputedStyle while you must use currentStyle with Internet Explorer...

To be cross browser you must do some simple object detection to check which method to use... Below is a simple example...

span.myClass{ background-color:red;

<script type="text/javascript">
function test(id){
var el = document.getElementById(id);

if(document.defaultView && document.defaultView.getComputedStyle){ // IS MOZILLA BASED BROWSER //;
var bg = document.defaultView.getComputedStyle(el, '').getPropertyValue("background-color");
alert('DOM way: '+bg);

else if(document.uniqueID && el.currentStyle){ // IS INTERNET EXPLORER //;
alert('IE way: '+el.currentStyle.backgroundColor);

<span id="abc" class="myClass" onclick="test(this.id)">style test</span>


Rune Carlsen
09-12-2004, 12:40 PM
Ok, thanks.
Based on this situation, can I still use:

document.getElementById(el).style.backgroundColor = '#D9D8D6';

to set the background-color value?

09-12-2004, 12:51 PM
Yes, certainly.

Rune Carlsen
09-12-2004, 06:30 PM
Thanks everyone, works smoothly.


09-13-2004, 08:29 AM
just watch out... Moz will return color values in RGB mode, not in Hexa...

09-13-2004, 12:24 PM
Actually, the value moz returns has sometimes been decimal and sometimes hex, they have changed normalised forms between versions. They'll likely change over to decimal rgba form when support for that is added. However, when you set it you can specify it any way you want.

09-13-2004, 04:54 PM
However, when you set it you can specify it any way you want.

Do you know a way to get a desired (Hex or RGB) value of a color?

09-13-2004, 06:28 PM
Yes, though I haven't tested it for compatibility. The method is rather well nested...


09-13-2004, 09:52 PM
You mean .getPropertyCSSValue(), for one. And for another, getFloatValue() requires an argument. In this case, the number 1 should return the appropriate number. And only Mozilla supports that level of DOM scripting to my knowledge, Opera has (had) at least lackluster DOM2 Style, though I'm admittedly unsure about 7.6 or Safari...

09-13-2004, 10:48 PM
Safari DOM2Style is far less reliable then that Opera has. Opera fully supports the interfaces they support. Safari support is wider (or at least was wider before op7.5), but sadly they expose many not properly supported interfaces.

03-23-2005, 10:42 PM
This thread nearly solves a probelm I've been working on. Actually maybe the solution is here and and I just don't see it. I have the following code which attempts to determine the color of some text and set other text to match that color. It works fine in Firefox, but does nothing in IE. I'd be greatful for any assistance. Also, if I will have problems the code on Opera or Safari, I'd appreciate any pointers--I don't have a Mac to test Safari.

// setStyleByClass: given an element type and a class selector,
// style property and value, apply the style.
// args:
// t - type of tag to check for (e.g., TD)
// c - class name
// p - CSS property
// v - value
var ie = (document.all) ? true : false;
var c_style = "foo";
function setStyleByClass(t,c,p){
// alert("Hello world");
var elements;
if(t == '*') {
// '*' not supported by IE/Win 5.5 and below
elements = (ie) ? document.all : document.getElementsByTagName('*');
} else {
elements = document.getElementsByTagName(t);

for(var i = 0; i < elements.length; i++){
var node = elements.item(i);
for(var j = 0; j < node.attributes.length; j++) {
if(node.attributes.item(j).nodeName == 'class') {
if(node.attributes.item(j).nodeValue == c) {
// alert("type is: " + t + "\n" + "class name: " + c + "\n" + "CSS property: " + p + "\n" + "Node style: " + node.style);

TD = eval('node');
// alert("What we have is: " + TD);
// this seems to be a problem in IE

if(document.defaultView && document.defaultView.getComputedStyle){
c_style = document.defaultView.getComputedStyle(TD, '').getPropertyValue("color");
// alert("text color is: " + c_style);
// alert('DOM way: '+ c_style);
else if(document.uniqueID && c_style.currentStyle){
alert('IE way:' );

eval('node.style.' + p + " = '" + c_style + "'");
setStyleByTag("font","color", c_style,1)


04-08-2005, 08:32 AM
Avoid using eval method. Use square bracket notation. See my sig for more info.