reading style attributes set by CSS using Javascript

I would like to be able to read the style attributes of an element from Javascript, where the style was set by a CSS.

When I set the style in the <div or <span, or whatever I can read them, but I am not seeing how to do this when the <div, <span or whatever sets the attributes using a class= and gets the settings from the CSS
Who is Participating?
mreuringConnect With a Mentor Commented:
I've added these functions to my test-page to assist in getting the color-value in a consistant way:

            function pad(n, s) {
                  return (1 << s-n.length).toString(2).substr(1) + n;

            function getHexColor(color) {
                  if (color.indexOf("#") == 0) return color //It's already hex-encoded
                  var rgbRE = /rgb\( ?([0-9]{1,3}), ?([0-9]{1,3}), ?([0-9]{1,3}) ?\)/i;
                  if (rgbRE.test(color)) {
                        var result = rgbRE.exec(color);
                        return "#" + pad(parseInt(result[1]).toString(16), 2) + pad(parseInt(result[2]).toString(16), 2) + pad(parseInt(result[3]).toString(16), 2);
                  } else return color;

Perhaps that will aid you in what you're attempting to do?
I could go an explain how to do it, however, this is one of those dicey areas where every browser has a different opinion. I think this code explains quite well, it's not originally mine though:

// Name: Get CSS Property
// Language: JavaScript
// Author: Travis Beckham |
// Description: Retrieve a CSS property from inline and external sources
// Compatibility: IE4+, NS6+, Safari 1.3+ ( Opera 8+ tested ok so far, comment by
// --------------------------------------------------
// From:

function getCSSProp (element, prop) {
  if ([prop]) {
    // inline style property
  } else if (element.currentStyle) {
    // external stylesheet for Explorer
    return element.currentStyle[prop];
  } else if (document.defaultView && document.defaultView.getComputedStyle) {
    // external stylesheet for Mozilla and Safari 1.3+
    prop = prop.replace(/([A-Z])/g,"-$1");
    prop = prop.toLowerCase();
    return document.defaultView.getComputedStyle(element,"").getPropertyValue(prop);
  } else {
    // Safari 1.2
    return null;

I've put the origin in the comments as I like to credit others for what they've done, but that particular part of the website is no longer up and running :(

Anyways, hope this helps,

jhurstAuthor Commented:
I may be missing something here but I don't think so.  I set the "element" using a getElementById and it does appear that I have the right one there since other attribuytes seem correct.  I then used the code above.  No good.  In fact I even tried using each of the three methods, style, currentStyle... separately in case the ones that were not supported were messing me up.  In no case can I get the color of the text

My style sheel specifies

.x {color: #0000ff}

My html:
<span class="x" id ="xx">Hello</span>

I just want to be able to read, and possibly set the color attribute for the word Hello
The way the value gets reported is slightly different for different browsers, but it works when I set it up (tested with FF1.5 and IE6):

What browser are you testing with?
jhurstAuthor Commented:
It is not your fault that this is HORRIBLE - it works - it is just what I asked for.  Thanks.  !  Great!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.