为什么在主样式表中设置'myDiv.style.display”时返回空字符串？

主样式表对显示样式的影响

使用 HTML 的显示样式显示内容时，必须了解内联样式表和主样式表如何影响其行为。本文探讨了 myDiv.style.display 在主样式表中设置时返回空字符串的问题，这与内联设置时不同。

显示的初始状态

HTML元素通常以默认显示值开始，通常是“内联”。为了覆盖这一点，开发人员经常使用内联样式：

<div>

但是，为了提高可维护性，在主样式表中设置这些初始样式是有益的。

意外行为

在主样式表中设置 display:none 时，元素的初始状态保持隐藏状态。但是，使用 JavaScript 访问 myDiv.style.display 最初会返回一个空字符串。这与内联样式不同，内联样式返回“none”。

使用 getCompulatedStyle 解决了问题

此问题的解决方案在于了解直接访问元素的 CSS 属性（例如，element.style.display）检索其内联样式设置。要访问外部样式表或浏览器默认值中定义的样式，开发人员必须使用 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); // prints 'none' or 'block' or 'inline' etc.

通过利用 getCompulatedStyle，开发人员可以准确检索外部设置的值，包括主样式表中的值。

以上是为什么在主样式表中设置'myDiv.style.display”时返回空字符串？的详细内容。更多信息请关注PHP中文网其他相关文章！