Javascript 更改元素的类会删除其以前的所有样式吗？

这是一个非常基本的问题

如果是带有

class=“oldClass”

的

。 如果我使用JavaScript（使用.className）将该div的类更改为

class=“newClass”

。它以前的风格会消失吗？或者在应用

newClass

之后，将只应用两个类中定义的样式

更详细地阐述我的问题。如果

oldClass

为

.oldClass
{
    border:1px solid red;
    background-color:green;
}

.newClass{
    background-color:black;
}

而

newClass

.oldClass
{
    border:1px solid red;
    background-color:green;
}

.newClass{
    background-color:black;
}

在使用javascript（使用.className）应用

newClass

之后，元素将具有哪些样式

---

（注意-我用不同的代码测试了这两次。每次都得到不同的结果。这就是为什么我会问一个非常基本的问题）只有新类

背景色：黑色将被应用

答复你的评论：

类为“oldClass”的元素将具有1px的实心红色边框和绿色背景
类为“newClass”的元素将具有黑色背景
一个类为“oldClass”和“newClass”的元素将有一个1px的纯红色边框和绿色背景或黑色背景，具体取决于CSS文档中这些选择器的顺序
因此，如果通过将
className
设置为“newClass”来删除“oldClass”，则
.oldClass
选择器中定义的样式将不再出现在该元素上，而
.newClass
选择器样式将出现

.
在任何时候，可以匹配元素的所有样式规则都将按特定顺序应用于该元素*。如果将类oldClass替换为newClass，元素将不再具有oldClass类，因此为oldClass指定的样式规则可能不再适用于该元素

一个元素一次可以有多个类。要设置多个类，只需通过空格分隔它们

*)顺序更难解释，但最基本的是：

！重要信息
值具有最高优先级
通过样式设置属性
具有更多id选择器的规则（
#元素
）
具有更多类和属性选择器的规则（
.class
和
[attr]
）
具有更多标记名的规则（
标记
）
规则在样式表中最后一个
你可以阅读更多关于专一性的内容

例如：

HTML

在该示例中，div将具有以下样式：


颜色：绿色（覆盖其他颜色，因为它是按样式设置的）
背景色：蓝色（覆盖紫色，因为id比类更具体）
高度：50px（覆盖100px，因为选择器中的两个类比一个更具体）

如果要将
c1
交换为
extra
，它将具有以下样式：


颜色：绿色

高度：100px（高度：50px不匹配，因为元素没有类别c1）
宽度：50px（匹配是因为元素有额外的类）
那么div应该只有黑色背景吗？而不是红色边界？