如何使用純 JavaScript 檢索元素的所有適用 CSS 規則？

使用JavaScript 尋找適用於元素的CSS 規則

在Web 開發中，存取特定類別或ID 的CSS 元素是一項常見任務，通常由工具和API 輔助。然而，瀏覽器會編譯來自各種來源的所有適用的 CSS 規則來決定元素的外觀。我們如何在純 JavaScript 中複製此功能，而不依賴瀏覽器插件？

識別計算的CSS 規則

考慮以下HTML 和CSS 範例：

<style type="text/css">
    p { color :red; }
    #description { font-size: 20px; }
</style>

<p>

在這種情況下，元素p#description 繼承了兩個CSS 規則：紅色和字體大小20 像素。目標是確定這些規則的起源。

JavaScript 實作

為了實現這一點，我們可以使用以下JavaScript 函數：

function css(el) {
    var sheets = document.styleSheets, ret = [];
    el.matches = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector || el.oMatchesSelector;
    for (var i in sheets) {
        var rules = sheets[i].rules || sheets[i].cssRules;
        for (var r in rules) {
            if (el.matches(rules[r].selectorText)) {
                ret.push(rules[r].cssText);
            }
        }
    }
    return ret;
}

用法

var rules = css(document.getElementById('elementId'));

用法

用>

規則變數現在將包含適用於所選元素的所有CSS規則的數組。

注意：

此函數依賴 Element.matches() 方法，該方法需要一個跨針對舊版瀏覽器的瀏覽器相容性polyfill。然而，它提供了一種快速有效的識別 CSS 規則的方法，無需額外的瀏覽器插件。

以上是如何使用純 JavaScript 檢索元素的所有適用 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！