无法隐藏DIV

Question

我要去香蕉，因为当我执行以下代码时：

myDiv.className += condition ? " green" : " red hidden";
console.log("class: " + myDiv.className);

我可以看到文本。事实上，我甚至看到我身边的红色边框！但是，对于某些（我可解释的）原因，该组件仍然可见。这要么是用来破坏我圣诞节的神圣干预，要么是因为疲劳而缺少一些非常基本的东西。这是什么？现在，上帝恨我吗？ ：）

.hidden{ display: none; }
.green{ border: 3px solid #00bb00; }
.red{ border: 3px solid #dd0000; }

Answer 1

某些其他选择器的特异性可能超过了您的.hidden类。例如，请考虑以下代码：

​var myDiv = document.querySelector("#foo");
myDiv.className = (false) ? "grn" : "red hidden";

在此示例中，与您的一样，结果为className red hidden，同时应用以下两项：

.hidden { display: none }
.red { border: 2px solid red }

但我的元素仍然可见：

当我检查这个元素的样式时，它清楚问题是什么 - 在这种情况下我有一个更具体的selecto #foo正在推翻.hidden类：

另一种选择可能是你在另一个地方有类似的脚本，进一步修改了这个元素的className。您可以使用debugger关键字插入调试点，然后逐步执行页面上的代码。

Answer 2

可能还有另一个脚本运行并删除名为 hidden 的类（非常常见的名称），我的猜测是编写该代码的人，按类选择元素，而不是id。很可能，那个人无意中有大范围的移除。

检查班级名称的剩余部分。你最后有一个空间。这是非常强烈的建议，已经某些东西但被删除​​了。 （对于没有删除空格的编码器的额外减去。）

您应该与该程序员交谈并解释如何更安全地进行操作。