Obtain CSS Property Values for HTML Elements in JavaScript

In web development, manipulating CSS properties dynamically can enhance the user experience and interface. With JavaScript, accessing these properties is straightforward.

In your scenario, a CSS file is linked to an HTML page, and you need to retrieve a specific property (e.g., color) for a div with the class name "layout." Here's how to achieve this using JavaScript:

Option 1: Parsing Document Style Sheets (Not Recommended)

Explanation:
This method involves manually iterating through the document.styleSheets object and parsing its contents to search for the desired property. However, this approach is not recommended as it can become unwieldy, especially for complex CSS files or when you need to retrieve properties for multiple elements.

Option 2: Emulating Element and Using Computed Style (Preferred)

Explanation:
This method is more efficient and provides accurate results. It involves creating an element with the same class name as the target element and then accessing the computed style of the created element. The computed style represents the actual style applied to the element, including inherited styles and any modifications made through user stylesheets or JavaScript.

JavaScript Code:

function getStyleProp(elem, prop) {
  if (window.getComputedStyle) {
    return window.getComputedStyle(elem, null).getPropertyValue(prop);
  } else if (elem.currentStyle) {
    return elem.currentStyle[prop]; // IE compatibility
  }
}
window.onload = function () {
  var d = document.createElement("div"); // Create a div element
  d.className = "layout"; // Set the class name
  alert(getStyleProp(d, "color")); // Retrieve the "color" property
};

Non-Inline Style Considerations

If you want to retrieve inherited style properties without inline style definitions, you can temporarily remove the inline styles and then retrieve the inherited values.

JavaScript Code:

function getNonInlineStyle(elem, prop) {
  var style = elem.cssText; // Cache the inline style
  elem.cssText = ""; // Remove inline styles
  var inheritedPropValue = getStyleProp(elem, prop); // Retrieve inherited value
  elem.cssText = style; // Restore inline style
  return inheritedPropValue;
}