在不影响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规则，可以有一个css选择器，它有100个值或只有1个。注意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>

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

<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动态添加或删除某些单独的类，同时保留其他类。

Answer 4

您可以在隐藏的Js操作期间简单地更改类名

或者使用classList更改所需元素的类，有关更多详细信息，请参见下面的文档：

https://developer.mozilla.org/en-US/docs/Web/API/Element/classList