如何使用JavaScript高效存取CSS類別樣式？

使用 JavaScript/jQuery 存取 CSS 類別樣式

要操作基於 CSS 類別的物件的視覺外觀，開發人員可以使用 JavaScript 或 jQuery 函式庫。考慮一個名為“.highlight”的 CSS 類，它將文字顏色設為紅色。

一種常見的方法是使用突出顯示類別創建不可見元素並檢索其動畫顏色。然而，這並不是一個理想的解決方案。以下概述了一種更有效的方法：

解決方案

已經開發了一個 JavaScript 函數來遍歷樣式表並為特定選擇器提取所需的樣式值。以下是實作：

function getStyleRuleValue(style, selector, sheet) {
    var sheets = typeof sheet !== 'undefined' ? [sheet] : document.styleSheets;
    for (var i = 0, l = sheets.length; i < l; i++) {
        var sheet = sheets[i];
        if (!sheet.cssRules) continue;
        for (var j = 0, k = sheet.cssRules.length; j < k; j++) {
            var rule = sheet.cssRules[j];
            if (
                rule.selectorText &&
                rule.selectorText.split(',').indexOf(selector) !== -1
            ) {
                return rule.style[style];
            }
        }
    }
    return null;
}

用法

getStyleRuleValue 函數的範例用法：

var color = getStyleRuleValue('color', '.foo'); // searches all sheets for the first .foo rule and returns the set color style.

var color = getStyleRuleValue('color', '.foo', document.styleSheets[2]);

此方法允許開發人員動態擷取CSS 類別樣式以在JavaScript 中使用動畫或其他動態功能，而不依賴建立不可見元素。

以上是如何使用JavaScript高效存取CSS類別樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！