更改元素的类将删除其以前的所有样式

Changing class of an element removes all its previous styles?

本文关键字：样式 删除 元素      更新时间：2024-07-04

这是一个非常基本的问题。

如果是具有class="oldClass"的<div>。如果我使用JavaScript（使用.className）将该div的类更改为class="newClass"，它以前的所有样式都会消失吗？或者在应用newClass之后，只应用两个类中定义的样式？

详细阐述我的问题。如果oldClass是

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

CCD_ 6为

.newClass{
    background-color:black;
}

使用javascript（使用.className）应用newClass之后，元素将具有哪些样式？

（注意-我用不同的代码测试了几次。每次都得到不同的结果。这就是为什么我要问更难的问题——这是一个非常基本的问题）

只有newClass background-color:black;将应用

回复您的评论：DEMO HERE

  1. 类为"oldClass"的元素将有一个1px的实心红色边框和一个绿色背景
  2. 类为"newClass"的元素将具有黑色背景
  3. 类为"oldClass"和"newClass"的元素将有一个1px的实心红色边框，绿色背景或黑色背景，具体取决于CSS文档中选择器的顺序

因此，如果通过将className设置为"newClass"来移除"oldClass"，则.oldClass选择器中定义的样式将不再出现在该元素上，而是出现.newClass选择器样式。

JSFiddle演示。

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

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

*)这个顺序有点难以解释，但最基本的是：

  1. !important值具有最高优先级
  2. 通过样式设置的特性
  3. 具有更多id选择器的规则（#element）
  4. 具有更多类和属性选择器的规则（.class和[attr]）
  5. 具有更多标记名的规则（tag）
  6. 样式表中的最后一条规则

你可以在这里阅读更多关于特异性的信息。

示例：

HTML

<div id="el" class="c1 c2 c3" style="color:green">I am text</div>

CSS：

#el { /* matches elements with id=el */
  color:red;
  background-color:blue;
}
.c1.c2 { /* matches elements with classes c1 and c2 */
  height:50px;
}
.c1,
.c2 { /* matches elements with class c1 and elements with class c2 */
  height:100px;
}
.c1 { /* matches elements with class c1 */
  color:grey;
  background-color:purple;
}
.extra { /* matches elements with class extra */
  width:50px;
}

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

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

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

  • 颜色：绿色
  • 高度：100px（高度：50px不匹配，因为元素没有类c1）
  • width:50px（匹配是因为元素具有额外类）
相关文章：