確定影響純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>JavaScript
var rules = css(document.getElementById('description'));
console.log(rules); // ['color: red;', 'font-size: 20px;']在此範例中，該函數識別兩個匹配的CSS規則：為所有
指定紅色。元素，另一個將 ID 為 #description 的元素的字體大小設為 20 像素。
傳回的陣列允許透過引用 CSSRule 物件文件進一步探索每個規則的詳細資訊。這種方法提供了一種全面且與瀏覽器相容的方法，用於提取應用於元素的計算 CSS 規則，而無需額外的插件，使開發人員能夠深入檢查和調試其樣式。
以上是如何在純 JavaScript 中檢索影響元素的所有 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
