如何以程式設計方式檢索 JavaScript 中元素適用的 CSS 規則？

檢索元素適用的CSS 規則

簡介：
Web 瀏覽器將各種樣式表中的CSS 樣式應用到元素來渲染它們。 Firebug 等工具公開此訊息，顯示每個元素的 CSS 繼承樹。本文闡述如何在不使用瀏覽器插件的情況下在純 JavaScript 中複製此功能。

解決方案：
要確定應用於元素的CSS 規則：

1. 取得文件的樣式表：存取與文件關聯的樣式表數組文件。
2. 迭代 CSS 規則：循環遍歷每個樣式表及其規則。
3. 檢查適用性：使用 matches() 方法決定元素是否與 CSS 規則的選擇器文字相符。
4. 捕獲適用規則： 如果找到匹配項，則將 CSS 文字推送到陣列中。

以下是實作此解決方案的範例 JavaScript 程式碼：

function css(el) {
    var sheets = document.styleSheets;
    var 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;
}

使用此函數，呼叫 css(document.getElementById('elementId'))。它將傳回一個包含應用的 CSS 規則作為字串的陣列。

範例：

考慮此範例 HTML 與 CSS：

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

<p>

呼叫css(document.getElementById('description'))將產生一個包含兩個的陣列elements:

["p { color: red; }", "#description { font-size: 20px; }"]

此函數提供了一種簡單且跨瀏覽器相容的方法來檢索純 JavaScript 中任何給定元素的適用 CSS 規則。

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