檢索元素適用的CSS 規則
簡介：
Web 瀏覽器將各種樣式表中的CSS 樣式應用到元素來渲染它們。 Firebug 等工具公開此訊息，顯示每個元素的 CSS 繼承樹。本文闡述如何在不使用瀏覽器插件的情況下在純 JavaScript 中複製此功能。
解決方案：
要確定應用於元素的CSS 規則：
以下是實作此解決方案的範例 JavaScript 程式碼：
function css(el) {
var sheets = document.styleSheets;
var 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(document.getElementById('elementId'))。它將傳回一個包含應用的 CSS 規則作為字串的陣列。
範例：
考慮此範例 HTML 與 CSS：
<style type="text/css">
p { color: red; }
#description { font-size: 20px; }
</style>
<p>呼叫css(document.getElementById('description'))將產生一個包含兩個的陣列elements:
["p { color: red; }", "#description { font-size: 20px; }"]此函數提供了一種簡單且跨瀏覽器相容的方法來檢索純 JavaScript 中任何給定元素的適用 CSS 規則。
以上是如何以程式設計方式檢索 JavaScript 中元素適用的 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
