getStyle

JavaScriptSource Staff May 8, 2006

Use this snippet to get the rendered style of an element. Quick and simple to implement.

The JavaScript Source: Snippets : getStyle

Simply click inside the window below, use your cursor to highlight the script, and copy [Control]+C the script into a new file in your text editor (such as Note Pad) and save [Control+S]. The script is yours!!!

/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: Robert Nyman :: http://www.robertnyman.com/ */

/*
  Example call of the function:
  
  getStyle(document.getElementById("container"), "font-size");
*/

// The regular version
function getStyle(oElm, strCssRule){
  var strValue = "";
  if(document.defaultView && document.defaultView.getComputedStyle){
    strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
  }
  else if(oElm.currentStyle){
    strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
      return p1.toUpperCase();
    });
    strValue = oElm.currentStyle[strCssRule];
  }
  return strValue;
}

// The version if you expect any IE 5.0 users whatsoever
function getStyle(oElm, strCssRule){
  var strValue = "";
  if(document.defaultView && document.defaultView.getComputedStyle){
    strValue = document.defaultView.getComputedStyle(oElm, "").getPropertyValue(strCssRule);
  }
  else if(oElm.currentStyle){
    try {
      strCssRule = strCssRule.replace(/\-(\w)/g, function (strMatch, p1){
        return p1.toUpperCase();
      });
      strValue = oElm.currentStyle[strCssRule];
    }
    catch(e){
      // Used to prevent an error in IE 5.0
    }
  }
  return strValue;
}

Did you use this script? Do you like this site? Please link to us!

Leave a Response

(0 comments)

Alphabetical Listing

Tutorials

Ajax Tutorials

Ajax

Buttons

Cookies

CSS

Forms

Games

Generators

Image Effects

Math Related

Miscellaneous

Multimedia

Navigation

Page Details

Password

Snippets

Text Effects

Time & Date

User Details

getStyle

Leave a Response

Attention JavaScript Coders

Go Deeper