如何找到 JavaScript 中應用於元素的 CSS 規則的起源？

尋找應用於元素的CSS 規則的起源

當瀏覽器渲染網頁時，它會從各種樣式表編譯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 規則的陣列。例如，呼叫 css(document.getElementById('elementId')) 將提供一個數組，其中每個元素代表應用於指定元素的 CSS 規則。

透過利用此解決方案，開發人員可以深入了解原始碼CSS 規則並更有效地管理元素樣式，而無需依賴瀏覽器外掛程式。

以上是如何找到 JavaScript 中應用於元素的 CSS 規則的起源？的詳細內容。更多資訊請關注PHP中文網其他相關文章！