html 如何用javascript动态地将classname前置到元素

qmelpv7a 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(117)

如果我有一个包含一些类的元素，我想给它添加额外的类。但它不应该覆盖现有类应用的现有样式（如果有的话）。
例如，如果我在类“绿色”中应用样式颜色，它只应用于颜色尚未由类定义的元素，（由内联样式定义的奖励）
<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>

Html

来源：https://stackoverflow.com/questions/76443160/how-to-dynamically-prepend-classname-to-the-element-with-javascript

1条答案

按热度按时间

1cosmwyk1#

正如@Barmar在评论中所说，类的顺序在样式的应用中并不重要，但在样式标记（或文件）中的顺序很重要。
如果你希望你的元素仍然是红色的，你应该添加！对你的红色课堂很重要

.red {
    color: red !important;
}

或者，如果你想只把绿色类添加到那些还不是红色的元素中，你可以修改你的js脚本，如下所示：

const elements = document.getElementsByClassName("elements");
for (const el of elements) {
    if(!el.classList.contains('red'))
        el.classList.add('green')
}

赞(0）回复(0）举报 2023-06-20

我来回答

html 如何用javascript动态地将classname前置到元素

1条答案

相关问题

热门标签

最新问答