How Can JavaScript Access CSS Properties of HTML Elements?

CSS Property Extraction with JavaScript

Accessing CSS properties of HTML elements through JavaScript is an essential skill for dynamic web development. Consider the scenario where an external stylesheet, such as "style.css," is linked to a webpage. To manipulate specific CSS properties, it is necessary to retrieve their values using JavaScript.

Options for Reading CSS Properties

There are two primary methods to achieve this:

1. Direct Style Object Access: In modern browsers, accessing the document.styleSheets object provides a comprehensive list of all style rules applied to the document. By parsing this object, it is possible to locate and extract individual properties. However, this method is not recommended due to its complexity and limitations.
2. GetComputedStyle Method: A more versatile approach involves creating an element with the desired style configuration, using the createElement() method. By applying the getComputedStyle() or currentStyle (IE) method to this element, the specific CSS property value can be obtained.

Example: Extracting the Color Property

Consider the following code snippet:

<code class="javascript">function getStyleProp(elem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null).getPropertyValue(prop);
    } else if (elem.currentStyle) {
        return elem.currentStyle[prop]; // IE
    }
}

window.onload = function () {
    var d = document.createElement("div"); // Create div
    d.className = "layout";                // Set class = "layout"
    alert(getStyleProp(d, "color"));       // Get property value
};</code>

This function takes two parameters: the targeted element and the desired CSS property (e.g., "color"). By creating a temporary div element with the same styling as the target element, the code extracts and returns the specified property value.

Advanced Techniques

To retrieve style properties that exclude inline styles, the getNonInlineStyle() function can be employed:

<code class="javascript">function getNonInlineStyle(elem, prop) {
    var style = elem.cssText; // Cache the inline style
    elem.cssText = "";        // Remove all inline styles
    var inheritedPropValue = getStyle(elem, prop); // Get inherited value
    elem.cssText = style;     // Add the inline style back
    return inheritedPropValue;
}</code>

By temporarily erasing inline styles, this function reveals the inherited property values from the stylesheet.

The above is the detailed content of How Can JavaScript Access CSS Properties of HTML Elements?. For more information, please follow other related articles on the PHP Chinese website!