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
LVL 8
jhurstAsked:
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?
0
 
mreuringCommented:
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 | squidfingers.com
// Description: Retrieve a CSS property from inline and external sources
// Compatibility: IE4+, NS6+, Safari 1.3+ ( Opera 8+ tested ok so far, comment by windgazer.nl)
// --------------------------------------------------
// From: http://squidfingers.com/code/snippets/?id=getcssprop

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 && 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,

 Martin
0
 
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
0
 
mreuringCommented:
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):
http://www.windgazer.nl/eexchange/Q_22755495.html

What browser are you testing with?
0
 
jhurstAuthor Commented:
It is not your fault that this is HORRIBLE - it works - it is just what I asked for.  Thanks.  !  Great!
0
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.