Why Does `this.style[property]` Return an Empty String in JavaScript?

JavaScript this.style[property] Returning an Empty String: A Clarification

While this.style[property] primarily retrieves inline styles applied directly to an element, there are instances where an empty string is obtained. This happens when the property in question is not set explicitly in the element's inline styles.

In the provided code snippet:

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

When calling element.css("height"), you're attempting to access the inline height property. However, in the HTML provided:

<div>

No inline height property is defined. Hence, this.style["height"] returns an empty string.

To retrieve the computed height, which includes cascade styles from external or inline stylesheets, you can use the getComputedStyle() method:

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

In this case, height would equal "100px".

To resolve the issue in the initial code, you can modify the css function as follows:

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;
}

With this modification, element.css("height") would return "100px" because the function now also checks for computed styles.

The above is the detailed content of Why Does `this.style[property]` Return an Empty String in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!