javascript - myDiv.style.display 在主样式表中设置时返回空白

Question

简短版本: myDiv.style.display (Javascript) 在我将 div 设置为 display:none 在主样式表中，但在通过内联样式设置时返回“无”？

长版:

我有一些 div，我通过它们的 display 样式隐藏和取消隐藏，用 Javascript 在 block 和 none 之间切换。它们总是从隐藏的 (display:none) 开始，我一直在这样设置内联样式:

<div id="anID" class="aClass" style="display:none">
   stuff
</div>

这是在 none 和 block 之间切换的 Javascript。这两个 chOpsXXX() 函数只是将 divSection.style.display 设置为相反的值(连同其他内务处理):

var divSection = document.getElementById("chOpsSection" + strSectionID);
var strDisplay = divSection.style.display;
if (strDisplay == "none") {
    chOpsDisplaySection(strSectionID);
} else {
    chOpsHideSection(strSectionID);
}

当我使用内联样式属性设置初始 display:none 样式时，一切正常。

我还在主样式表中为这些 div 设置其他样式。所以我决定将 display:none 的初始状态移动到所述样式表可能是有意义的。我这样做了。我不会发布它，我想你可以想象一下。

但是当我这样做时，div 最初是隐藏的(display:none)，但是第一次调用 divSection.style.display 返回一个空字符串(alert(strDisplay); 返回一个空字符串，而不是 null)。

我上面显示的 Javascript 然后隐藏它(因为它不等于“无”)，然后 next 调用 divSection.style.display 返回“none”从那里一切正常。 (如果我在主样式表中将它设置为 inline，则行为相同:div 最初是可见的，并且第一次调用 divSection.style.display 返回一个空字符串)。

通过检查上面我的 Javascript 中的“无”和“”，这很容易修复。但我想知道从 divSection.style.display 返回空白字符串是否是标准行为。

欢迎所有回复。

Answer 1

如果您通过 JS 访问 DOM 元素(例如使用 getElementById)，您将无法读取该元素的计算样式，因为它是在 CSS 文件中定义。为避免这种情况，您必须使用属性 getComputedStyle(或 IE 的 currentStyle)。

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

用法(JSFiddle):

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