如何使用純 JavaScript 取得應用於元素的所有 CSS 規則？

在JavaScript 中尋找特定於元素的CSS 規則

在Web 開發中，了解應用於元素的CSS 規則對於微調至關重要它的外觀和行為。依靠 Firebug 或 WebKit Inspector 等開發人員工具可以深入了解影響元素渲染的已編譯 CSS 規則。然而，在沒有額外插件的情況下在純 JavaScript 中複製此功能是一個挑戰。

為了解決這個挑戰，讓我們深入研究實現此任務的 JavaScript 函數。該函數恰如其分地命名為 css，它採用 HTML 元素作為輸入，並傳回適用於該元素的 CSS 規則陣列。

css 函數利用 matches 方法，該方法支援跨瀏覽器相容性。它迭代文件中的樣式表，檢查這些樣式表中的每個 CSS 規則。如果元素的選擇器與規則的選擇器文字匹配，則該規則的 CSS 文字將會新增到陣列中。

例如，考慮以下CSS 和HTML：

p { color: red; }
#description { font-size: 20px; }

<p></p>

呼叫css(document.getElementById('description')) 將傳回一個包含以下兩個CSS 的陣列規則：

p { color :red; }
#description { font-size: 20px; }

透過分析此數組，開發人員可以確定影響元素的特定CSS 屬性的來源並進行相應的調整。 JSFiddle (http://jsfiddle.net/HP326/6/) 上提供的css 函數提供了一個全面的解決方案，用於識別在純JavaScript 中塑造元素外觀的CSS 規則，使開發人員能夠在自己的應用程式中利用瀏覽器渲染功能.

以上是如何使用純 JavaScript 取得應用於元素的所有 CSS 規則？的詳細內容。更多資訊請關注PHP中文網其他相關文章！