JavaScript 如何存取 HTML 元素的 CSS 屬性？-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-10-23 21:24:02

原創

660 人瀏覽過

How Can JavaScript Access CSS Properties of HTML Elements?

使用 JavaScript 來擷取 CSS 屬性

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

讀取CSS 屬性的選項

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

直接物件存取：在現代瀏覽器中，存取document.styleSheets 物件提供了應用於文件的所有樣式規則的完整清單。透過解析該對象，可以定位並提取各個屬性。但是，由於其複雜性和局限性，不建議使用此方法。
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中文網其他相關文章！