How to Retrieve CSS Properties of Webpage Elements Using JavaScript?-CSS Tutorial-php.cn

How to Retrieve CSS Properties of Webpage Elements Using JavaScript?

Susan Sarandon

Release： 2024-10-23 19:04:02

Original

887 people have browsed it

How to Retrieve CSS Properties of Webpage Elements Using JavaScript?

Retrieving CSS Properties of Webpage Elements Using JavaScript

When a CSS file is linked to a webpage, JavaScript developers may encounter the need to read specific CSS properties of elements.

In this scenario, where a webpage contains a

element with the class name "layout," developers require a solution to retrieve a specific property of this element using JavaScript. While various approaches are available, two recommendable options include:

Option 1: Create and Modify an Element

Create an element with the same properties as the one of interest (e.g.,
with class name "layout").
Use the getComputedStyle method to retrieve the computed property value. This method provides the resulting style after applying all relevant CSS rules.

<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");
    d.className = "layout";
    alert(getStyleProp(d, "color"));
}</code>

Copy after login

Option 2: Manually Parse the Document.styleSheets Object

Access the document.styleSheets object, which contains an array of all stylesheets linked to the document.
Use the getPropertyValue() method on each stylesheet to retrieve the specific property value associated with the desired selector.

This option is not recommended unless specifically required to gather all CSS properties defined by a particular selector.

Additionally, to ignore inline style definitions of the current element, utilize the getNonInlineStyle() function:

<code class="javascript">function getNonInlineStyle(elem, prop){
    var style = elem.cssText;
    elem.cssText = "";
    var inheritedPropValue = getStyle(elem, prop);
    elem.cssText = style;
    return inheritedPropValue;
}</code>

Copy after login

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