如何在 JavaScript 中檢索 CSS 屬性值及其原始單位？

檢索指定單位的CSS 屬性值

在Web 開發中，檢索最初定義的CSS 屬性值非常重要，維持其指定單位。雖然 getComputedStyle 和 jQuery 的 css() 方法提供以像素為單位的值，但在某些情況下取得原始 CSS 值至關重要。以下介紹如何在Google Chrome 中實現此目的，而無需依賴框架：

Chrome 的元素檢查器

Chrome 的元素檢查器提供了一項有價值的功能：顯示CSS 屬性值的能力當它們被設定時，為預期值提供視覺提示。這表示 Chrome 能夠以程式設計方式檢索此資訊。

getMatchedStyle 函數

為了在程式碼中實現此目的，我們利用getMatchedCSSRules() 方法來取得匹配的規則，然後我們按照相反的優先順序對其進行迭代。我們優先考慮元素樣式而不是外部規則，並檢查重要屬性。 getMatchedStyle 函數如下：

範例

考慮以下 HTML 和CSS：

使用給定程式碼，以下寬度是擷取：

這突顯了以指定單位擷取CSS 屬性值的能力，為基於腳本的樣式操作任務提供了更大的靈活性和精確度。

以上是如何在 JavaScript 中檢索 CSS 屬性值及其原始單位？的詳細內容。更多資訊請關注PHP中文網其他相關文章！