在 Web 開發中，了解 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 規則的陣列。數組中的每個元素代表一個特定的規則。
要示範該功能，請考慮以下HTML 和CSS：
<style type="text/css">
p {
color :red;
}
#description {
font-size: 20px;
}
</style>
<p>在此範例中， id 為「description」的元素應用了兩個CSS 規則：紅色和20px 的字體大小。呼叫 css(document.getElementById('description')) 將傳回一個包含兩個 CSS 規則字串的陣列。
有關每個規則的更多詳細信息，您可以探索 CSSRule物件文件。
以上是如何使用純 JavaScript 檢查 CSS 繼承樹？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
