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

掌握样式表和内联样式：了解显示属性行为

尝试使用 JavaScript 检索 DIV 元素的显示属性时，出现差异已被观察到。将显示设置为 HTML 元素内的无内联，myDiv.style.display 按预期返回“none”。但是，在主样式表中将显示定义为 none 会导致通过 myDiv.style.display 访问时出现空字符串。

此行为是根据 JavaScript 的操作方式来理解的。通过 JavaScript 访问 DOM 元素时，无法直接获取该元素的计算样式，因为它是在 CSS 文件中定义的。

解决方案：利用 getCompulatedStyle

来获取要计算样式并解决此差异，必须使用 getCompulatedStyle 属性或 Internet Explorer 的 currentStyle。此属性检索所需样式属性的计算值。

用于检索计算样式的 JavaScript 函数

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

用法

利用 getStyle 检索显示属性：

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

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