取得所有與元素相關的 CSS 規則
瀏覽器渲染涉及編譯 CSS 規則並將其應用於特定元素。這個分層過程最終導致元素的最終外觀,如 Firebug 等瀏覽器工具所示。然而,在沒有額外插件的情況下存取這些計算的 CSS 規則需要純 JavaScript 中的自訂解決方案。
解決方案:
要檢索元素的 CSS 規則,我們可以利用 JavaScript 的DOM API 和 CSSRule 物件。以下程式碼片段提供了跨瀏覽器相容的解決方案:
此函數將一個元素作為輸入並傳回一個包含適用於該元素的 CSS 規則的陣列。要檢索特定元素的規則,只需呼叫 css(document.getElementById('elementId'))。
範例:
考慮以下 HTML 與 CSS:
呼叫 css(document.getElementById('description'))將傳回以下內容array:
此陣列列出了套用於該元素的兩個 CSS 規則,讓您清楚地了解其最終外觀。
以上是如何使用純 JavaScript 檢索應用於特定元素的所有 CSS 規則?的詳細內容。更多資訊請關注PHP中文網其他相關文章!