reading style attributes set by CSS using Javascript

Posted on 2007-08-10
Last Modified: 2012-06-22
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
Question by:jhurst
    LVL 17

    Expert Comment

    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,

    LVL 8

    Author Comment

    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
    LVL 17

    Expert Comment

    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?
    LVL 17

    Accepted Solution

    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?
    LVL 8

    Author Comment

    It is not your fault that this is HORRIBLE - it works - it is just what I asked for.  Thanks.  !  Great!

    Featured Post

    How to improve team productivity

    Quip adds documents, spreadsheets, and tasklists to your Slack experience
    - Elevate ideas to Quip docs
    - Share Quip docs in Slack
    - Get notified of changes to your docs
    - Available on iOS/Android/Desktop/Web
    - Online/Offline

    Join & Write a Comment

    Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
    CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
    The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
    The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

    733 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    19 Experts available now in Live!

    Get 1:1 Help Now