Work with Style Properties

Scripting Computed Styles

The W3C standard API for determining the computed style of an element is the getComputedStyle() method of the Window object. The first argument to this method is the element whose computed style is desired. The second argument is any CSS pseudoelement, such as ":before" or ":after" whose style is desired. In the Mozilla and Firefox implementation of this method, the second argument is required and may not be omitted. As a result, you'll usually see getComputedStyle() invoked with null as its second argument.

IE provides a simpler alternative: every HTML element has a currentStyle property that holds its computed style.

var CSS =  {
    getStyle: function(element) {
      if (!element) {
        return;
      }
      if (typeof element === "string") {
        element = document.getElementById(element);
      }
      if (element.currentStyle) { // For IE
        return element.currentStyle;
      } else if (document.defaultView && document.defaultView.getComputedStyle) { // For Modern Browsers
        return document.defaultView.getComputedStyle(element, null);
      } else {
        return element.style;
      }
    }
};

Retrive Global/External CSS Properties

These two approaches frequently require different ways of referring to the style properties. In the case of the IE currentStyle object, references are made via the same object model syntax as is used for getting and setting style values. Therefore, hyphenated CSS property names must be referenced via the intercapitalization system (e.g., margin-left becomes marginLeft). But the property name for the W3C DOM getPropertyValue() method must be in the CSS property format (e.g., margin-left is margin-left).

Also be aware that for some CSS properties, different browser versions may return different value types-especially in colors that are specified by CSS syntax other than rgb(r, g, b). For example, if you set the color with a plain-language color name (e.g., orange), the value returned from the browsers may be in a different format. For the most part, if you specify colors in rgb(r, g, b) format, you'll get that back.

CSS values consisting of length measurements typically contain units (pixels, points, ems, and so on). If you tend to utilize the value of a style property for any math, such as adding five pixels to the left edge of a positioned element, be sure to extract the numeric portion of sorting values that include units. Use the parseInt() function for integers and the parseFloat() function for numeric values that may have digits to the right of the decimal (e.g., 0.5em).

Once you assign a value to a property of an element's style object, the value can be read subsequently through the style property. But for consistency's sake, you can continue to read a value the getPropertyValue() method and currentStyle object because it returns the effective value applied to the element at any instant.

var CSS =  {
    get: function(element, name) {
      if (!element) {
        return;
      }
      if (typeof element === "string") {
        element = document.getElementById(element);
      }
      // Convert "background-color" to "backgroundColor"
      var camelCase = name.replace(/\-(\w)/g, function(all, letter) {
        return letter.toUpperCase();
      });
      if (element.currentStyle) { // For IE
        return element.currentStyle[name] || element.currentStyle[camelCase];
      } else if (document.defaultView && document.defaultView.getComputedStyle) { // For Modern Browsers
        name = name.replace(/([A-Z])/g, "-$1").toLowerCase();
        return document.defaultView.getComputedStyle(element, null).getPropertyValue(name);
      } else {
        return element.style[name] || element.style[camelCase];
      }
    },
    set: function(element, properties) {
      if (!element) {
        return;
      }
      if (typeof element === "string") {
        element = document.getElementById(element);
      }
      for (var name in properties) {
        // Convert "background-color" to "backgroundColor"
        var camelCase = name.replace(/\-(\w)/g, function(all, letter) {
          return letter.toUpperCase();
        });
        if (typeof properties[name] === "number") {
          element.style[camelCase] = (parseInt(properties[name], 10) || 0) + "px";
        }
        if (typeof properties[name] === "string") {
          element.style[camelCase] = properties[name];
        }
      }
    }
};

View Demo

Related Posts

• Styles and classes, getComputedStyle
• Javascript Get Styles