Why Does `myDiv.style.display` Return an Empty String When Display Is Set in a Master Stylesheet?

Master Stylesheets and Inline Styles: Understanding Display Property Behavior

When attempting to retrieve the display property of a DIV element using JavaScript, a discrepancy has been observed. Setting the display to none inline within the HTML element, myDiv.style.display returns "none" as expected. However, defining the display as none within a master stylesheet results in an empty string when accessed via myDiv.style.display.

This behavior is understood based on the manner in which JavaScript operates. When accessing DOM elements through JavaScript, the computed style of the element cannot be retrieved directly since it is defined in the CSS file.

Solution: Utilizing getComputedStyle

To obtain the computed style and address this discrepancy, it is necessary to employ the getComputedStyle property or currentStyle for Internet Explorer. This property retrieves the computed value of the desired style property.

JavaScript Function for Retrieving Computed Style

function getStyle(id, name) {
  var element = document.getElementById(id);
  return element.currentStyle
    ? element.currentStyle[name]
    : window.getComputedStyle
    ? window.getComputedStyle(element, null).getPropertyValue(name)
    : null;
}

Usage

Utilizing getStyle to retrieve the display property:

var display = getStyle('myDiv', 'display');
alert(display); //will print 'none' or 'block' or 'inline' etc

The above is the detailed content of Why Does `myDiv.style.display` Return an Empty String When Display Is Set in a Master Stylesheet?. For more information, please follow other related articles on the PHP Chinese website!