如何使用 JavaScript 高效檢索 CSS 樣式？

使用 JavaScript 檢索 CSS 樣式

透過 JavaScript 操作樣式是 Web 開發中常見的任務。雖然使用 style 屬性設定樣式很簡單，但取得特定樣式的目前值可能更具挑戰性。

過去，存取特定樣式值需要解析整個樣式字串，這是一個繁瑣的過程。然而，現代瀏覽器提供了一個方便的解決方案： getComputedStyle()。

使用 getCompulatedStyle()

getComputedStyle() 方法傳回一個表示元素的計算樣式的物件。要檢索特定樣式的值，只需對計算的樣式物件使用 getPropertyValue() 方法即可。

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

此程式碼會擷取 ID 為 image_1 的元素的頂部樣式屬性的計算值。結果儲存在頂部變數中。 window.getCompulatedStyle() 方法確保傳回計算的樣式，考慮到任何應用程式的 CSS 規則和內聯樣式。

用法範例

考慮以下HTML 程式碼：

<img>

使用getCompulatedStyle() 擷取目前的頂部位置image:

var image = document.getElementById('image_1');
var topPosition = window.getComputedStyle(image).getPropertyValue('top');

以上是如何使用 JavaScript 高效檢索 CSS 樣式？的詳細內容。更多資訊請關注PHP中文網其他相關文章！