在不影响 CSS 值的情况下更改元素的类名

Question

我有一个DOM元素，我只想更改元素的className。我想保持 css 值不变。(对于外部 css 和内联 css(

例如，如果我有这个：

.sample{
display: block
font-size: 10px,
font-color: #fff
}

<div class="sample">...</div>

在做了一些JavaScript操作之后，我需要达到这个：

.newCss{
display: block
font-size: 10px,
font-color: #fff
}

<div class="newCss">...</div>

注意：css 没有严格的规则，可以有一个包含 100 个值或只有 1 个值的 css 选择器。 注意2：没有像.newCss这样的css选择器，我应该将css属性从.sample转换为一个名为.newCss的新属性

Answer 1

您可以在进行更改之前获取元素的计算样式：

const style = getComputedStyle(theElement);

然后将该样式直接应用于元素：

theElement.style.cssText = style.cssText;

然后，删除类不会更改元素的样式，因为它是内联样式的。

例：

const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
const cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
theElement.style.cssText = cssText;
console.log("after: ", theElement.className);
}, 800);

.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}
.newCss {
background-color: yellow;
}

<div class="sample">this is the div</div>

如果新类在 CSS 中具有与之关联的样式，则可能会影响元素的样式。如果需要防止这种情况，请先更改类，然后分配 CSS 文本：

例：

const theElement = document.querySelector(".sample");
console.log("before:", theElement.className);
setTimeout(() => {
theElement.style.cssText = getComputedStyle(theElement).cssText;
theElement.className = "newCss";
console.log("after: ", theElement.className);
}, 800);

.sample{
display: block;
font-size: 10px;
color: #fff;
background-color: black;
}

<div class="sample">this is the div</div>

Answer 2

你必须使用 JavaScript。为了使用 JavaScript，您必须为<div>标记分配一个 ID。然后通过JavaScript操作它。示例：document.getElementById("id1").className="sample";

还要确保在 CSS 属性后使用分号(;)。

function f1()
{
document.getElementById("id1").className="sample";
}

.sample{
display: block;
font-size: 10px;
font-color: #fff;
color: red;
}
.newCss{
display: block;
font-size: 10px;
font-color: #fff;
color: green;
}

<div id='id1' class="newCss"><p>Hello</p></div>
<button onclick="f1()">Click</button>

Answer 3

好吧，如果你想将className更改为一个相同的类，你可以简单地将样式表中的类重新定义为等效的，或者你可以使用内联样式，但是CSS类的目的是保持一组唯一的规则，所以两个相同规则的CSS类会破坏它们存在的目的， 是 CSS 规则的唯一定义，所以如果你希望 CSS 规则完全相同，那么就没有理由更改 className，除非你用其他 JavaScript 函数引用它，或者如果你想在保留旧样式的同时添加其他样式，在这种情况下：

使用classList动态添加或删除某些单个类，同时保留其他类。