使用JavaScript 尋找適用於元素的CSS 規則
在Web 開發中，存取特定類別或ID 的CSS 元素是一項常見任務，通常由工具和API 輔助。然而，瀏覽器會編譯來自各種來源的所有適用的 CSS 規則來決定元素的外觀。我們如何在純 JavaScript 中複製此功能，而不依賴瀏覽器插件？
識別計算的CSS 規則
考慮以下HTML 和CSS 範例：
<style type="text/css">
p { color :red; }
#description { font-size: 20px; }
</style>
<p>在這種情況下，元素p#description 繼承了兩個CSS 規則：紅色和字體大小20 像素。目標是確定這些規則的起源。
JavaScript 實作
為了實現這一點，我們可以使用以下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;
}用法
var rules = css(document.getElementById('elementId'));用法
用>規則變數現在將包含適用於所選元素的所有CSS規則的數組。
注意：
此函數依賴 Element.matches() 方法，該方法需要一個跨針對舊版瀏覽器的瀏覽器相容性polyfill。然而，它提供了一種快速有效的識別 CSS 規則的方法，無需額外的瀏覽器插件。以上是如何使用純 JavaScript 檢索元素的所有適用 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
