如何使用 JavaScript 有效率地檢索特定 CSS 值？

使用JavaScript 檢索CSS 值

雖然使用style 屬性透過JavaScript 設定CSS 值很簡單，但取得目前CSS 值可能更具挑戰性。本文解決的是如何在不解析整個樣式字串的情況下檢索特定 CSS 值的問題。

解：getCompulatedStyle()

這個問題的解決方案在於getCompatedStyle() 方法。此方法可讓您存取元素的計算樣式，其中包括已套用於該元素的所有 CSS 值，包括內聯樣式和繼承樣式。

要使用 getCompulatedStyle()，請將元素傳遞給它您想要檢索其樣式。它會傳回一個對象，其中包含該元素的所有計算樣式屬性。然後，您可以使用該物件的 getPropertyValue() 方法來檢索特定 CSS 屬性的值。

以下範例說明如何擷取 ID 為 image_1 的圖片元素的頂部 CSS 值：

var element = document.getElementById('image_1'),
    style = window.getComputedStyle(element),
    top = style.getPropertyValue('top');

console.log(top);

此程式碼會將圖片元素的目前最高值記錄到控制台。請注意，頂部的值是一個字串，因此如果您需要對其進行任何計算，則需要先將其轉換為數字。

以上是如何使用 JavaScript 有效率地檢索特定 CSS 值？的詳細內容。更多資訊請關注PHP中文網其他相關文章！