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

IT技术 javascript css
2021-02-24 05:12:16

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

长版：

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

<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是否是标准行为。

欢迎所有回复。

4个回答

如果您通过 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
嘿@LightStyle - 你的意思是element.currentStyle[name]而不是x.currentStyle[styleProp]？
2021-04-22 05:12:16
+1 也来自我。感谢您的回复。你教会了我一些新东西。
2021-05-10 05:12:16
酷而有用;) 它帮助我编造了这个github.com/jintor/stubquery.js/blob/main/stubquery.js
2021-05-13 05:12:16

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

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

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

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

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

PS - 寻找空字符串也不适合你，因为 display: "" 与 display: "none" 不同（实际上，与 display: block 相同，对于 div，因为 a空白基本上意味着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"))

它应该显示没有，即使你用CSS设置

@LightStyle，是的，我提到“你可以使用 jquery”
2021-05-03 05:12:16
@alex，您没有在此答案中添加任何有用的内容。
2021-05-04 05:12:16
@Steven Moseley，“骗人”？我不是 EN 本地人，我应该像复制您的答案一样阅读此内容？
2021-05-05 05:12:16
这是对我的回答的欺骗，提供了一个 jquery 示例。
2021-05-15 05:12:16
我发现这个答案中的链接有助于理解我做错了什么。
2021-05-21 05:12:16
其它你可能感兴趣的问题
上一篇为什么 forEach 比常规迭代器更受欢迎？ 下一篇jQuery.closest() 实现的 DOM/纯 JavaScript 解决方案？