Why Does myDiv.style.display Return Blank When Set in a Master Stylesheet?

myDiv.style.Display Returns Blank When Set in Master Stylesheet

When setting the display style of a div element using myDiv.style.display (JavaScript), it's expected behavior to return a blank string if the display style is set to none in a master stylesheet. This occurs because JavaScript can't directly access the computed style, which is the style applied through CSS rules.

To resolve this issue and retrieve the accurate display style, it's recommended to use the getComputedStyle() method. This method allows access to the computed style of an element, including styles defined in master stylesheets.

Here's an example of how to use getComputedStyle():

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

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

By utilizing getComputedStyle(), you can accurately retrieve the display style of an element, even if it's set in a master stylesheet. This ensures proper functionality when toggling the display style using JavaScript.

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