如果我有一个包含一些类的元素,我想给它添加额外的类。但它不应该覆盖现有类应用的现有样式(如果有的话)。
例如,如果我在类“绿色”中应用样式颜色,它只应用于颜色尚未由类定义的元素,(由内联样式定义的奖励)<div class="red">
变为<div class="green red">
,应该仍然是红色,因为应用了最后一个类。
我尝试在javascript中使用className prepend class,但奇怪的是它对我不起作用。
const elements = document.querySelectorAll(".elements");
elements.forEach(el => el.className = "green " + el.className);
.red {
color: red;
}
.green {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<div class="elements red">I am still red</div>
<div class="elements"> I am green now</div>
</body>
</html>
1条答案
按热度按时间1cosmwyk1#
正如@Barmar在评论中所说,类的顺序在样式的应用中并不重要,但在样式标记(或文件)中的顺序很重要。
如果你希望你的元素仍然是红色的,你应该添加!对你的红色课堂很重要
或者,如果你想只把绿色类添加到那些还不是红色的元素中,你可以修改你的js脚本,如下所示: