javascript addClass

笔记2023-12-2517 人已阅来源:网络

JavaScript中的addClass是一种广泛使用的技术,可以用于添加样式类并改变元素的样式。

对于一个具有以下HTML代码的按钮:

<button id="myButton">点击我</button>

我们可以使用JavaScript添加一个css类,同时改变按钮的样式,使其成为一个红色按钮:

// 获取元素
var button = document.getElementById('myButton');
// 添加类使用以下方式
button.classList.add('redButton');

这个类可以在样式表中定义:

.redButton {
background-color: red;
}

在这个例子中,我们添加了一个名为redButton的类,该类定义了红色背景颜色。这样,与按钮相关联的样式将发生变化,并实际改变了按钮的颜色。

除了添加类之外,同样可以使用remove()函数删除类:

button.classList.remove('redButton');

让我们看下另一个例子。如果我有两个div元素,其中一个用于选中状态,它是以class name "selected"的类为标识的,另一个未选中,接着,我想通过JavaScript将最初被选中的div切换为未被选中,同时将未被选中的div切换为被选中,我怎样做呢?很简单:

var selected = document.querySelector('.selected');
var notSelected = document.querySelector('.notSelected');
selected.classList.remove('selected');
selected.classList.add('notSelected');
notSelected.classList.remove('notSelected');
notSelected.classList.add('selected');

这可以通过给每个div添加不同的类来实现,一开始,选中的div会被显示,而未选中的div不会。接着我们从选中的div中删除selected类(也就是从它身上删除样式),然后向它添加notSelected类(添加不选中样式)。同样,在未选中的div上,我们删除notSelected类并为其添加selected类,以切换两者的位置。

在以上例子中,我们演示了如何添加和删除类。这可以实现诸如在单击div之后将其标记为已读之类的任务。掌握此技术意味着你可以轻松高效地获取,添加以及删除类。