javascript - 无法隐藏 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";

在这个例子中，和你的一样，结果是 a classNameof red hidden，应用以下两个：

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

但我的元素仍然可见：

当我检查这个元素的样式时，很明显问题出在哪里——#foo在这种情况下，我有一个更具体的选择，它推翻了.hidden类：

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

Answer 2

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

检查类名的剩余部分。你最后有一个空间。这是非常强烈的建议，表明存在某些内容但已被删除。（编码器的额外减去不删除空间）。

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