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

Question

短版: 是不是标准的行为myDiv.style.display时,我已经设置(JavaScript)的返回空白div,以display:none在主样式表,但返回"无"时,它是通过一个内嵌样式设置？

长版:

我有一些div我隐藏和取消隐藏他们的display风格,用block和之间的Javascript切换它none.他们总是从hidden(display:none)开始,我一直用内联样式设置:

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

这是在none和之间切换的Javascript block.两个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最初是hidden(display:none),但第一次调用divSection.style.display返回一个空字符串(alert(strDisplay);返回一个空字符串,而不是null).

我上面显示的Javascript然后隐藏它(因为它不等于"none")然后下一次调用divSection.style.display返回"none"并且一切正常.(如果我inline在主样式表中将其设置为相同的行为:div初始可见,并且第一次调用divSection.style.display返回空字符串).

通过在我上面的Javascript中检查"none"和"",这很容易解决.但我想知道这个空字符串的返回divSection.style.display是否是标准行为.

欢迎所有回复.

Answer 1

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

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