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";

在此示例中，与您的示例一样，结果是 red hidden 的 className，应用以下两项:

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

但我的元素仍然可见:

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

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