为什么 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中文网其他相关文章！