如何在 JavaScript 中檢索元素的 CSS 屬性值？

使用JavaScript 讀取元素的CSS 屬性

問題：

問題：

如何取得值使用JavaScript 的元素的CSS 屬性，考慮到樣式表從外部連結到網頁？

解：

主要有兩種方法：

1。使用 document.styleSheets:

此方法涉及手動迭代 document.styleSheets 數組並解析 CSS 規則以查找所需的屬性。但是，不建議使用這種方法，因為它會佔用大量資源，並且對於大多數場景來說並不實用。

2.建立匹配元素並使用 getComputedStyle：

此方法建立一個與目標元素具有相同 CSS 選擇器的元素，並使用 getComputedStyle 方法檢索屬性值。這種方法的優點是它考慮了所有繼承的樣式和動態應用的任何樣式。

程式碼範例：

<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
}</code>

擷取div 的「顏色」屬性對於「layout」類，使用以下程式碼：

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

用法：

附加說明：

<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>

忽略內聯目前元素上的樣式定義，使用getNonInlineStyle 函數：

以上是如何在 JavaScript 中檢索元素的 CSS 屬性值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！