為什麼在 JavaScript 中取得 CSS 屬性時 `this.style[property]` 有時會傳回空字串？

從JavaScript 取得樣式屬性

在JavaScript 中處理CSS 樣式時，在某些情況下this.style[property] 可能會返回空字串。

理解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(property, value) 的元素上的CSS 屬性。

但是，如果您嘗試檢索未設定內聯的屬性，例如以下範例中的 height：

<div>

const element = document.getElementById('test');
const height = element.css('height'); // Returns ""

在這種情況下，height將傳回空字串，因為它沒有定義為內聯樣式.

解決方案

存取外部樣式表中定義的CSS 屬性或使用類，您可以使用getCompulatedStyle() 函數。此函數會擷取元素的計算樣式，其中包含套用於該元素的所有樣式：

const element = document.getElementById('test');
const height = getComputedStyle(element).height; // Returns "100px"

在您提供的更新程式碼中，您已透過使用getCompulatedStyle() 來擷取計算樣式來修正css 函數元素的：

function css(prop, value) {
  // Code to get or set CSS properties
  if (value == null) {
    var b = (window.navigator.userAgent).toLowerCase();
    var 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];
  }
  // Code to continue with your logic
}

透過使用此更新的函數，您現在可以正確檢索在外部樣式表或使用類別中定義的CSS屬性，即使它們不是設定為內聯樣式。

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