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

myDiv.style.display returns blank when set in master stylesheet

本文关键字：设置 返回 空白 样式 style display myDiv      更新时间：2023-09-26

简短版本:是标准的行为，myDiv.style.display (Javascript)返回空白时，我已经设置了div display:none在主样式表，但返回"none"时，它是通过内联样式设置?

长版:

我有一些div s，我通过他们的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然后隐藏它(因为它不等于"none")，然后下一个调用divSection.style.display返回"none"，从那里一切工作正常。(如果我在主样式表中将其设置为inline，则行为相同:div最初是可见的，并且对divSection.style.display的第一次调用返回一个空白字符串)。

这很容易通过检查"none"answers"在我的Javascript上面修复。但是我想知道从divSection.style.display返回一个空白字符串是否是标准行为。

欢迎回复

如果您通过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

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

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

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

示例:

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

PS -寻找空字符串也不会为您工作，因为display: "与display: "none"不一样(事实上，对于div，与display: block相同，因为空白本质上意味着inherit)

我的解决方案:

创建.hidden类

.hidden {
   display: none !important;
}
Javascript: 

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

javascript的display属性表示仅用于DOM属性

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

W3schools， Style对象表示一个个人风格声明

你可以使用jquery的css方法来获得像

这样的混合显示值
alert($("#foo").css("display"))

它应该显示none即使你设置了css

相关文章：