当默认类由 ID 设置时，通过 Javascript 更改 CSS 类答案

【问题标题】：Change CSS class by Javascript when default class is set by ID当默认类由 ID 设置时，通过 Javascript 更改 CSS 类
【发布时间】：2015-04-12 03:34:05
【问题描述】：

我有一个 DIV，它通过 ID 在外部样式表中应用了 CSS，例如：

<div id="myFavoriteDIVever">Stuff</div>

#myFavoriteDIVever {
    display: none;
}

然后，在一个 Javascript 函数中，我将以下类设置为同一个 DIV：

document.getElementById('myFavoriteDIVever').className = 'superCoolClass';

.superCoolClass {
    display: block;
}

由于某种原因，当我这样做时，DIV 未设置为显示为块。它仍然不显示在 DOM 中。但是如果我改变它，让 DIV 应用一个默认的 CSS 类来设置 display: none;然后我稍后用 Javascript 设置一个不同的 CSS 类来设置 display: block;它按预期工作并将 DIV 显示为块元素。

为什么 CSS 类会覆盖 ID CSS？因此，当我应用新的 className 时，它应该覆盖 #element 设置。没有？

【问题讨论】：

标签： javascript css

【解决方案1】：

Ascending order of specificity

以下选择器列表是通过增加特异性：

通用

选择器类型

选择器类

选择器属性

选择器伪类

ID 选择器

内联样式

您可以使用内联样式覆盖它

document.getElementById('myFavoriteDIVever').style.display = 'block';

#myFavoriteDIVever {
    display: none;
    width: 300px;
    height: 400px;
    background: red
}

&lt;div id="myFavoriteDIVever" class="myFavoriteDIVever"&gt;Stuff&lt;/div&gt;

【讨论】：

谢谢！那讲得通。我不知道优先事项。我试图避免在我的 Javascript 中使用内联样式，以便更容易编辑。
我选择了您的答案，因为您提供了关于特异性的非常有用的文档。非常感谢！

【解决方案2】：

Id 具有更高的优先级，因此添加类不会有任何影响。你最好的镜头是：

<div id="myFavoriteDIVever" class="myFavoriteDIVever">Stuff</div>

.myFavoriteDIVever {
    display: none;
}
document.getElementById('myFavoriteDIVever').className = 'superCoolClass';

【讨论】：

不需要默认类。在 CSS 中链接 ID 和类（例如 #myFavoriteDIVever.superCoolClass { ... } ）就可以了。
所以，@SebastianHomeier，我会这样做：#myFavoriteDIVever.hide 和 #myFavoriteDIVever.show。在 Javascript 中，要将其更改为“显示”，我是否只需执行 document.getElementById('myFavoriteDIVever').className = 'show'？这样做有效吗？
无视。我试过了，它奏效了。太感谢了！这是一个干净、灵活的解决方案。
基本上，是的。您不需要.hide 类，因为您的ID 选择器已经有display: none;。我刚刚发布了一个简单的解决方案。
谢谢你，@SebastianHomeier！

【解决方案3】：

问题不在于您的 javascript，而在于 CSS。有一个概念叫做特异性。这个想法是每个 CSS 条目都有一些特异性值（1000、100、10、1）。将应用的样式是最“具体”的样式。 ID 选择器 = 100。类选择器 = 10。ID 将获胜。尝试从

更改类的 css

.superCoolClass { display: block; }

到

#myFavoriteDIVever.superCoolClass { display: block; }

【讨论】：

【解决方案4】：

这应该没问题：

HTML：

<div id="myFavoriteDIVever">Stuff</div>

CSS：

#myFavoriteDIVever {
    display: none;
}

#myFavoriteDIVever.show {
    display: block;
}

JS：

document.getElementById('myFavoriteDIVever').className = 'show';

【讨论】：