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

JavaScript 的this.style[property] 返回空字串：揭秘原因及解決方案

訪問this.style[property] 時在JavaScript 中，您可能會遇到它檢索空字串而不是預期值的情況。這可能會令人困惑，特別是當您嘗試檢索已設定的樣式屬性時。

理解問題

this.style[property] 旨在存取已在 HTML 中或透過內聯樣式直接指派給元素的樣式。如果尚未為元素明確設定請求的屬性，則 this.style[property] 將傳回空字串。

層疊樣式的情況

通常，元素的樣式在 CSS 樣式表中定義。這些樣式是級聯的，這意味著它們是根據特定規則繼承和覆蓋的。當一個元素符合多個樣式表規則時，最具體的規則優先。

在提供的範例中，#test 元素在樣式表中定義了兩種樣式： height: 100px;和寬度：100px；。然而，該元素也具有背景的內聯樣式：#CCC;，它會覆寫背景的#test樣式表規則。

由於CSS的級聯性質，this.style[width]和this.style [height] 將檢索空字串，因為這些屬性已在樣式表中設置，但被內聯樣式覆蓋。

解決方案： getCompatedStyle()

要擷取有效的樣式屬性值（包含級聯樣式），您可以使用getCompulatedStyle() 方法：

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

getComputedStyle()傳回一個物件表示指定元素的計算樣式，考慮所有套用的樣式，包括繼承和覆寫的屬性。

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