添加/删除/替换html元素的类

Question

我很好奇如何在html元素中添加/删除类？这似乎是一个非常简单的操作。但事实证明，由于某种原因找不到方法removeClass。

所以我需要做的是替换或删除旧的并向元素添加新的。我怎么能这样做？

Answer 1

使用AddClass添加类，removeClass删除，toggleClass切换（如果存在则删除类，如果不存在则删除）：）

Answer 2

如果您使用jQuery，请确保在脚本之前加载它，然后像这样使用：

$('p').removeClass('myClass yourClass') // remove class
$("p").addClass("myClass yourClass");   // add class

如果你想在这里使用纯JS，你可以：How do I add a class to a given element?

var d = document.getElementById("div1");
d.className = d.className + " otherclass";

Answer 3

removeClass方法包含在jQuery中，除非你重写它。

$("#someElement").removeClass("someclass");

Answer 4

使用addClass和removeClass

<div class="firstClass" id="uniqeId"></div>

$("div#uniqeId").removeClass("firstClass");
$("div#uniqeId").addClass("Some_Other_Class");

Answer 5

$('#elementId').addClass('className');
$('#elementId').removeClass('className');

请参阅：http://api.jquery.com/category/manipulation/class-attribute/

Answer 6

由于您的问题标有jquery，因此您可以使用两种功能：

1. $(element).removeClass('oldclass')

2. $(element).addClass('newclass')

如果没有jQuery，在现代浏览器上，您可以使用classList属性：

element.classList.remove('oldclass')

element.classList.add('newclass')

Answer 7

您可以同时使用.toggleClass()添加/删除，我的意思是从一个班级切换到另一个班级：

来自文档的描述

  

在匹配元素集中的每个元素中添加或删除一个或多个类，具体取决于类的存在或switch参数的值。

如果这是你的html：

<div class="aaa">Some text.</div>

然后这个脚本：

$('div.aaa').toggleClass('bbb');

将输出如下：

<div class="aaa bbb">Some text.</div>

---

或者如果你这样做：

$('elem').toggleClass('aaa bbb');
     //--------------------^^^---here this class will be added/removed