如何檢索原始單位的 CSS 屬性值？

取得原始單位的 CSS 屬性值

在決定元素的 CSS 屬性值時，開發者通常會依賴 getCompulatedStyle 或 jQuery 的 css() 等方法。但是，這些方法傳回以像素為單位的值，如果該值最初以其他單位（例如百分比、em 或 px）設置，則可能會出現問題。這就提出了一個問題：無論設定的單位是什麼，我們如何取得其原始單位的 CSS 屬性值？

元素樣式和排序的重要性

關鍵在於考慮元素樣式和 CSS 選擇器順序。元素樣式具有最高優先權，因此我們首先檢查該值是否在元素的 style 屬性中明確設定。如果是，我們檢索該值及其優先權。

接下來，我們使用 getMatchedCSSRules 檢查符合的 CSS 規則。這些規則按優先順序排序（最高的最後），並且我們向後迭代它們。如果任何規則具有非空優先級，我們會更新該值。但是，如果規則具有重要優先級，我們會立即傳回該值。

程式碼範例

考慮以下 HTML 和 CSS：

<div class="b">div 1</div>
<div>
<p>以及以下JavaScript程式碼：</p>
<pre class="brush:php;toolbar:false">var d = document.querySelectorAll('div');

for (var i = 0; i <p>此程式碼輸出以下寬度divs:</p><pre class="brush:php;toolbar:false">div 1:  100px
div 2:  50%
div 3:  auto
div 4:  44em

結論

透過考慮元素樣式和符合CSS 規則的順序，此自訂getMatchedStyle函數可以準確檢索原始單位的CSS 屬性值。這些知識對於精確管理元素大小和尺寸至關重要。