如何在純 JavaScript 中檢索影響元素的所有 CSS 規則？

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

在Web 開發中，檢查瀏覽器載入的原始樣式表僅提供部分資訊了解應用於元素的CSS 規則。這是因為瀏覽器編譯所有 CSS 規則並將它們應用到基於繼承的元素，從而產生複雜的繼承樹，該繼承樹在樣式表中不會立即顯現出來。

對於尋求純 JavaScript 解決方案來重現此功能的開發人員，檢索在不依賴其他瀏覽器插件的情況下，有關影響元素的計算 CSS 規則的詳細資訊構成了重大挑戰。不過，這裡有一個全面的解決方案：

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 文字的陣列。

為了說明其用法，請考慮以下內容HTML 和CSS:

HTML

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

<p></p>

JavaScript

var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']

在此範例中，該函數識別兩個匹配的CSS規則：為所有

指定紅色。元素，另一個將 ID 為 #description 的元素的字體大小設為 20 像素。

傳回的陣列允許透過引用 CSSRule 物件文件進一步探索每個規則的詳細資訊。這種方法提供了一種全面且與瀏覽器相容的方法，用於提取應用於元素的計算 CSS 規則，而無需額外的插件，使開發人員能夠深入檢查和調試其樣式。

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