如何使用純 JavaScript 檢查 CSS 繼承樹？

使用JavaScript 檢查CSS 繼承樹

考慮一個帶有id 為「description」的p 元素的網頁：

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

<p>

當瀏覽器渲染此元素時，它將所有適用的CSS 規則合併到單一繼承樹中。我們如何在純 JavaScript 中複製這個，而不依賴瀏覽器插件？

解決方案：

為了檢查應用於元素的 CSS 規則，我們可以遍歷文件的樣式表並匹配元素的選擇器。以下是一個跨瀏覽器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;
}

呼叫css(document.getElementById('description')) 傳回應用於元素的CSS 規則字串數組，在本例中：

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

此功能可讓開發人員存取計算的CSS 規則來源，協助偵錯和理解網頁樣式。

以上是如何使用純 JavaScript 檢查 CSS 繼承樹？的詳細內容。更多資訊請關注PHP中文網其他相關文章！