如果我在 javascript 中重写了类名，是否重新应用了现有的 CSS 属性

Are existing CSS properties reapplied if i overwritte a className in javascript?

本文关键字：应用 属性 CSS 新应用 是否 javascript 重写 如果      更新时间：2023-09-26

假设我有以下CSS类。

.div{
background-color: #eee;
}
.show{
top: 50%;
left: 50%;
}
.hide{
top: -50%;
left: -50%;
}

现在我创建一个div并使用Javascript设置其类名。

var div = document.createElement("div");
div.className = "div"

稍后我再次将其更改为 

div.className = "div show";

然后再次到 

div.className = "div hide";

在我看来，如果我以这种方式工作，我会将这个div 的背景颜色设置为 3 次 #eee 不是吗？如果这是真的;只用JavaScript调整顶部和左侧坐标不是更经济吗？这样？

div.style.top = "50%";
div.style.left = "50%";

另外，如果这是真的，我不妨使用以下CSS类不？

.divShow{
background-color: #eee;
top:50%;
left:50%;
}
.divHide{
background-color: #eee;
top:-50%;
left:-50%;
}

还是我对 CSS 的理解都错了？

您可能需要

检查Element.prototype.classList属性。它为您提供了诸如 .add() ，.remove()甚至.toggle() 。您还可以使用这些方法应用多个类名。

div.classList.add( 'div' );

MDN 文档

在 JS HAS 中设置 className 会覆盖类名。

每次更改类名（例如从div show 更改为div 隐藏）时，您都会删除div 和 show 的类，然后重新添加div 的类，并添加到隐藏类。

这没有什么不经济的，因为你没有直接将css设置为元素。

此外，您不能多次设置参数，它只会覆盖以前的设置（因此它不是不经济的，别担心）。

您使用错误的方式来添加类。使用 div.className 时，将覆盖类，多次应用 background 属性。

您应该改用div.classList.add( 'div' );

它就像一个变量的变化值，如果

你写

   var div = document.getElementById("div");
   div.className = "classname";

然后我会给 将div 元素的类名替换为最后分配的值

但是如果你写 

 var div = document.getElementById("div");
div.className += " classname";

然后它会将类添加到div 元素

相关文章：