如何僅使用 JavaScript 確定哪些 CSS 規則會影響特定元素？

確定影響JavaScript 中元素的CSS 規則

問題：

許多基於以下條件選擇元素的功能班級或ID。但是，可以透過檢查瀏覽器載入的原始 CSS 樣式表來更深入地研究瀏覽器的渲染過程。 CSS 規則被編譯並應用於來自多個樣式表的元素，創建一個複雜的繼承樹。

問題：

我們如何在純 JavaScript 中複製此功能而不依賴於附加瀏覽器插件？

範例：

對於給定元素，例如：

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

<p></p>

p#description 元素是受兩個CSS 規則影響：紅色和字體大小20px。

答案：

功能：

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;
}

用法：

calling css(document.getElementById('elementId')) 

用法：

用法： 用法： 函數傳回一個陣列包含與傳遞的元素相符的每個CSS規則。

以上是如何僅使用 JavaScript 確定哪些 CSS 規則會影響特定元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！