一尘不染

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

css

简短版本:myDiv.style.display当我在主样式表中将(Javascript)设置div为空白时
,它是否返回标准行为display:none,而通过内联样式进行设置时,则返回“无”?

长版:

我有一些div通过display样式隐藏和隐藏的,并在block和之间使用Javascript进行切换none。它们总是从隐藏(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最初是隐藏的(display:none),但是第一次调用divSection.style.display返回一个空字符串(alert(strDisplay);返回一个空字符串,而不是null)。

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

通过在上面的Javascript中同时检查“
none”和“”,很容易修复。但是我想知道是否从divSection.style.display标准字符串返回空白字符串。

欢迎所有答复。


阅读 439

收藏
2020-05-16

共1个答案

一尘不染

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

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
2020-05-16