为什么在 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>
<pre class="brush:php;toolbar:false">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 属性，即使它们不是设置为内联样式。