Question

简短版本：当我在主样式表中将myDiv.style.display设置为div时，display:none（Javascript）返回空白是标准行为吗？返回＆＃34;无＆＃34;什么时候通过内联样式设置？

长版：

我有一些div我隐藏和取消隐藏他们的display样式，在block和none之间使用Javascript切换它。它们始终以隐藏式（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然后隐藏它（因为它不等于＆＃34;没有＆＃34;）然后 next 调用divSection.style.display返回＆＃34 ;无＆＃34;从那里一切正常。（如果我在主样式表中将其设置为inline，则行为相同：div初始可见，第一次调用divSection.style.display返回空字符串。）

通过检查＆＃34; none＆＃34;这很容易解决。和＆＃34;＆＃34;在我上面的Javascript中。但我想知道从divSection.style.display返回空字符串是否属于标准行为。

欢迎所有回复。

Answer 1

如果您通过JS访问DOM元素（例如使用getElementById），您将无法读取该元素的计算样式，因为它是在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;
}

使用（JSFiddle）：

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

Answer 2

它无效，因为您将其作为元素的style属性删除，并将其放在外部样式表中。 DOM不会显示文档对象中不存在的属性值（DOM只是一个逐字读取HTML文档的XML解析器）。

要查找在外部样式表中设置的CSS值，您必须解析document.styleSheets并找到匹配的选择器。

使用像jQuery这样的库变得非常方便，因为它解析了外部样式表，并且有辅助方法来将完整的CSS应用于元素。

如何在jQuery中执行此操作的示例：

value = $("#anID").css("display");

PS - 寻找一个空字符串也不适合你，因为display：“”与display：“none”不同（实际上，与display：block相同，对于div ，因为空白本质上意味着inherit）

Answer 3

javascript display属性仅代表DOM属性

Mozilla JS wiki，返回表示元素的样式属性的对象。

W3schools， Style对象代表个人风格陈述

您可以使用jquery的css方法获取混合显示值，如

alert($("#foo").css("display"))

即使您使用css

设置，也应显示 none

Answer 4

我的解决方案：

创建类.hidden

.hidden {
   display: none !important;
}

Javascript：

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}

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

4 个答案: