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

【问题标题】：Change Element's Class Name without affecting CSS values在不影响 CSS 值的情况下更改元素的类名
【发布时间】：2020-05-20 13:50:49
【问题描述】：

我有一个 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 选择器。 Note2: 没有 .newCss 之类的 css 选择器，我应该将 css 属性从 .sample 转换为一个名为 .newCss 的新属性

【问题讨论】：

忍不住问：为什么？
因为我只需要直接更改我的班级名称。原因与安全有关。
您是否真的需要添加 CSS 规则，或者只是让应用于元素的样式保持不变？
类名可能有哪些安全隐患？
@monstereo — 不太可能

标签： javascript html jquery css dom

【解决方案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;
}

&lt;div class="sample"&gt;this is the div&lt;/div&gt;

如果 new 类在 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;
}

&lt;div class="sample"&gt;this is the div&lt;/div&gt;

【讨论】：

const cssText = getComputedStyle(theElement).cssText;这将返回空字符串
@monstereo - 我无法想象会发生这种情况的场景。该属性是well supported，如果您正在执行它的浏览器不支持它，它将是undefined，而不是""。请在您的问题中添加minimal reproducible example 复制该问题（或者可以说这是一个新问题，您可以将其作为新问题发布）。

【解决方案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>

【讨论】：

嗨，假设我没有 .newCss，只有我有 .sample，这样，我应该得到从 sample 到 newCss 的所有 css 属性。但是没有严格的规定，这意味着它可以包含更多的 100 个属性，或者只有 1 个
您可以通过 JavaScript 将内联 CSS 添加到 HTML 中。但是您不能通过 JavaScript 操作外部 CSS 文件。您可以将多个 CSS 类添加到一个 div 中，但请确保一个类属性不会覆盖其他类的属性。

【解决方案3】：

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

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

【讨论】：