如何在Javascript中添加和删除类而不使用jQuery

Question

我正在寻找一种快速且安全的方法，在没有jQuery的情况下添加或删除HTML元素中的类。 这种方法还应该在早期版本的IE（IE8及以上）中可行。

- Peter Eberle

---

定义“早期”是什么？请参阅MDN上的classList shim（https://developer.mozilla.org/en-US/docs/Web/API/Element.classList#wrapper）适用于IE> 7。 - George

Answer 1

使用纯JavaScript向元素添加类的另一种方法

添加类：

document.getElementById("div1").classList.add("classToBeAdded");

移除类的方法：

document.getElementById("div1").classList.remove("classToBeRemoved");

注意：但不支持IE <= 9或Safari <=5.0

- Shoaib Chikate

---

注意：在IE 8及以上版本中，我猜测。 - David Thomas

有没有一种方法可以在一条语句中添加一个并删除另一个？ - edddd

@edddd 是的！尝试使用element.classList.toggle，可以在MDN ClassList上找到示例。 - Jeff Spicoli

Answer 2

下面的3个函数可在不支持 classList 的浏览器中使用:

function hasClass(el, className)
{
    if (el.classList)
        return el.classList.contains(className);
    return !!el.className.match(new RegExp('(\\s|^)' + className + '(\\s|$)'));
}

function addClass(el, className)
{
    if (el.classList)
        el.classList.add(className)
    else if (!hasClass(el, className))
        el.className += " " + className;
}

function removeClass(el, className)
{
    if (el.classList)
        el.classList.remove(className)
    else if (hasClass(el, className))
    {
        var reg = new RegExp('(\\s|^)' + className + '(\\s|$)');
        el.className = el.className.replace(reg, ' ');
    }
}

https://jaketrent.com/post/addremove-classes-raw-javascript/

- Dan Bray

---

我一直在想，为什么人们要为现代浏览器添加功能呢？我的意思是，如果你想支持旧版浏览器，那么这段代码不是多余的吗？ - Goowik

jongo45的答案是最佳的。ANSWER - Abhi

@Abhi 不是这样的。他的解决方案适用于“IE10及以上版本”，而问题所述为“IE8及以上版本”。 - Dan Bray

Answer 3

为了未来的友好性，我支持使用classList及其polyfill/shim包的建议：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList#wrapper

var elem = document.getElementById( 'some-id' );
elem.classList.add('some-class'); // Add class
elem.classList.remove('some-other-class'); // Remove class
elem.classList.toggle('some-other-class'); // Add or remove class
if ( elem.classList.contains('some-third-class') ) { // Check for class
    console.log('yep!');
}

- Chris Ferdinandi

Answer 4

classList 从IE10开始提供支持，如果可以请使用它。

element.classList.add("something");
element.classList.remove("some-class");

- jongo45

Answer 5

我很惊讶这里没有一个答案明确提到非常有用的 DOMTokenList.prototype.toggle 方法，它真的可以简化很多代码。

例如，你经常会看到这样的代码：

if (element.classList.contains(className) {
  element.classList.remove(className)
} else {
  element.classList.add(className)
}

这可以用一个简单的调用进行替换：\{\{调用名称\}\}。

element.classList.toggle(className)

在许多情况下也非常有用，如果您根据条件添加或删除类名，可以将该条件作为第二个参数传递。如果该参数为真值，则toggle的行为类似于add，如果它是假值，则其行为类似于调用remove。

element.classList.toggle(className, condition) // add if condition truthy, otherwise remove

- connexo

Answer 6

要在没有JQuery的情况下添加类，只需将yourClassName附加到您的元素className中。

document.documentElement.className += " yourClassName";

要删除类，可以使用replace()函数。

document.documentElement.className.replace(/(?:^|\s)yourClassName(?!\S)/,'');

正如@DavidThomas所提到的，如果您想将类名动态传递给替换函数，则需要使用new RegExp()构造函数。

- zavg

---

@George 很容易修复，只需在 className 前后添加一个空格即可。 - Alexandru Severin

@George 在正则表达式中，\b锚定了正则表达式在单词边界或单词与非单词字符之间的位置，反之亦然。 - zavg

请注意，如果您想动态传递类名，则需要使用new RegExp()构造函数。 - David Thomas

@DavidThomas 谢谢您的评论，如果您不介意，我会在答案中加入它。 - zavg

在 RegExp 中，\b 不足以匹配边界字符，因为类名中的某些字符是有效的。/\bfoo\b/ 会替换类名 "foo-bar" 的第一部分。 - user1106925

@squint 是的，你说得对，看起来需要使用更复杂的正则表达式来处理这些情况... - zavg

Answer 7

添加和删除类（在IE8+上测试过）

将trim() 添加到IE中（来自：JavaScript中的.trim()在IE中不起作用）

if(typeof String.prototype.trim !== 'function') {
  String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, ''); 
  }
}

添加和删除类：

function addClass(element,className) {
  var currentClassName = element.getAttribute("class");
  if (typeof currentClassName!== "undefined" && currentClassName) {
    element.setAttribute("class",currentClassName + " "+ className);
  }
  else {
    element.setAttribute("class",className); 
  }
}
function removeClass(element,className) {
  var currentClassName = element.getAttribute("class");
  if (typeof currentClassName!== "undefined" && currentClassName) {

    var class2RemoveIndex = currentClassName.indexOf(className);
    if (class2RemoveIndex != -1) {
        var class2Remove = currentClassName.substr(class2RemoveIndex, className.length);
        var updatedClassName = currentClassName.replace(class2Remove,"").trim();
        element.setAttribute("class",updatedClassName);
    }
  }
  else {
    element.removeAttribute("class");   
  } 
}

使用方法：

var targetElement = document.getElementById("myElement");

addClass(targetElement,"someClass");

removeClass(targetElement,"someClass");

一个有效的 JSFIDDLE: http://jsfiddle.net/fixit/bac2vuzh/1/

- Yonatan Ayalon

---

<div class="parent-container" id="parent-container"> 当我添加测试类时，会发生以下情况： <div class="parent-container test" id="parent-container"> 然后我移除该类<div class="paent-container" id="parent-container"> 它会删除 parent-container 中的 "r"。 - Peter Eberle

已添加一个可工作的JSFIDDLE - 如果仍然发生此问题，请告诉我使用的浏览器和版本。 - Yonatan Ayalon

Answer 8

试试这个：

  const element = document.querySelector('#elementId');
  if (element.classList.contains("classToBeRemoved")) {
    element.classList.remove("classToBeRemoved");

  }

- Nalan Madheswaran

Answer 9

您也可以进行以下操作

elem.classList[test ? 'add' : 'remove']('class-to-add-or-remove');

取代

if (test) {
    elem.classList.add('class-to-add-or-remove');
} else {
    elem.classList.remove('class-to-add-or-remove');
}

- Kerry Johnson

Answer 10

我正在使用这个简单的代码来完成这个任务：

CSS 代码

.demo {
     background: tomato;
     color: white;
}

Javascript 代码

function myFunction() {
    /* Assign element to x variable by id  */
    var x = document.getElementById('para);

    if (x.hasAttribute('class') {      
        x.removeAttribute('class');     
    } else {
        x.setAttribute('class', 'demo');
    }
}

- Fahim Shah