• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 2511
  • Last Modified:

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
0
jhurst
Asked:
jhurst
  • 3
  • 2
1 Solution
 
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
 
mreuringCommented:
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
 
jhurstAuthor Commented:
It is not your fault that this is HORRIBLE - it works - it is just what I asked for.  Thanks.  !  Great!
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now