JavaScript 如何存取 HTML 元素的 CSS 屬性？

使用 JavaScript 來擷取 CSS 屬性

透過 JavaScript 存取 HTML 元素的 CSS 屬性是動態 Web 開發的一項基本技能。考慮外部樣式表（例如“style.css”）連結到網頁的情況。要操作特定的 CSS 屬性，需要使用 JavaScript 檢索它們的值。

讀取CSS 屬性的選項

有兩種主要方法可以實現此目的：

1. 直接物件存取：在現代瀏覽器中，存取document.styleSheets 物件提供了應用於文件的所有樣式規則的完整清單。透過解析該對象，可以定位並提取各個屬性。但是，由於其複雜性和局限性，不建議使用此方法。
2. GetCompulatedStyle 方法： 更通用的方法是使用 createElement() 方法建立具有所需樣式配置的元素。透過對此元素套用 getCompulatedStyle() 或 currentStyle (IE) 方法，可以獲得具體的 CSS 屬性值。

範例：擷取Color 屬性

考慮以下程式碼片段：

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

此函數採用兩個參數：目標元素和函數所需的CSS 屬性（例如“顏色”）。透過建立與目標元素具有相同樣式的臨時 div 元素，程式碼提取並傳回指定的屬性值。

進階技術

擷取樣式屬性排除內聯樣式，可以使用getNonInlineStyle() 函數：

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

暫時刪除內聯樣式，函數顯示從樣式表繼承的屬性值。

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