20

简短版本：myDiv.style.display当我在主样式表中将其设置div为(Javascript) 时返回空白 是否是标准行为，display:none但在通过内联样式设置时返回“无”？

长版：

我有一些divs 我通过他们的风格隐藏和取消隐藏，用 Javascript 在和display之间切换。他们总是从隐藏的 ( ) 开始，因此我一直在设置内联样式：blocknonedisplay: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 中检查“无”和“”来解决。但我想知道返回一个空白字符串divSection.style.display是否是标准行为。

欢迎所有回复。

4

4 回答 4

24

如果您通过 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
于 2013-05-25T11:06:23.273 回答
3

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

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

这就是使用类库jQuery变得非常方便的地方，因为它解析外部样式表，并具有帮助方法来将完整的 CSS 应用于元素。

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

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

PS - 寻找一个空字符串也不适合你，因为 display: "" 与 display: "none" 不同（事实上，对于一个 div，它与 display: block 相同，因为空白基本上意味着inherit）

于 2013-05-25T11:04:53.910 回答
2

我的解决方案：

创建类.hidden

.hidden {
   display: none !important;
}

Javascript：

function toggleHidden(id) {
    var x = document.getElementById(id);
    x.classList.toggle('hidden');
}
于 2018-11-14T07:37:21.080 回答
0

javascript display 属性仅代表 DOM 属性

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

W3schools , Style 对象代表一个单独的风格声明

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

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

即使您使用 css 设置它也应该不显示

于 2013-05-25T11:11:30.653 回答