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

JavaScript this.style[property] 傳回空字串：澄清

而this.style[property] 主要檢索應用的內聯樣式直接存取元素，有時會得到空字串。當未在元素的內聯樣式中明確設定相關屬性時，就會發生這種情況。

在提供的程式碼片段中：

function css(prop, value) {
  if (value == null) {
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

呼叫 element.css("height") 時，您正在嘗試存取內聯高度屬性。但是，在提供的 HTML 中：

<div>

未定義內聯高度屬性。因此， this.style["height"] 傳回一個空字串。

要擷取計算的高度，其中包含來自外部或內聯樣式表的級聯樣式，您可以使用getCompulatedStyle() 方法：

const element = document.getElementById("test");
const style = getComputedStyle(element);
const height = style.height;

在這種情況下，高度將等於“100px”。

要解決初始程式碼中的問題，您可以修改css 函數如下：

function css(prop, value) {
  if (value == null) {
    const b = (window.navigator.userAgent).toLowerCase();
    let s;
    if (/msie|opera/.test(b)) {
      s = this.currentStyle;
    } else if (/gecko/.test(b)) {
      s = document.defaultView.getComputedStyle(this, null);
    }
    if (s[prop] != undefined) {
      return s[prop];
    }
    return this.style[prop];
  }
  if (prop) {
    this.style[prop] = value;
  }
  return true;
}

透過此修改，element.css("height") 將傳回“100px”，因為該函數現在也檢查計算樣式。

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