為什麼 JavaScript 中 `this.style[property]` 有時會回傳空字串？

為什麼 'this.style[property]' 回傳空字串？

在 JavaScript 程式中，存取 'this.style [property]' 屬性可能會導致空字串。當嘗試檢索 CSS 樣式表中設定的樣式的值時，可能會發生這種情況。

「this.style[property]」屬性旨在存取內聯樣式，這些樣式是直接設定的樣式使用「style」屬性到 HTML 元素。它不會取得外部或嵌入式 CSS 樣式表中定義的樣式。

要解決此問題，請使用 getCompulatedStyle() 函數。此函數計算元素的組合樣式，包括樣式表定義的樣式：

const element = document.getElementById('myId');
const style = getComputedStyle(element);
console.log(style.height); // "100px"

在此範例中，「getComputedStyle()」函數用於擷取元素的「height」屬性。控制台將輸出值“100px”，它代表樣式表中定義的高度。

因此，'this.style[property]'雖然對於訪問內聯樣式很有用，但不適合獲取定義的樣式在 CSS 樣式表中。利用「getComputedStyle()」檢索元素的有效樣式，包括所有來源。

以上是為什麼 JavaScript 中 `this.style[property]` 有時會回傳空字串？的詳細內容。更多資訊請關注PHP中文網其他相關文章！