更新的JS类方法

Question

我正在寻找一种快速安全的方法来在没有jQuery的情况下从html元素中添加和删除类。
它也应该在早期IE（IE8及更高版本）中工作。

Answer 1

使用纯JavaScript

将类添加到元素的另一种方法

添加课程：

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

删除课程：

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

注意：但不支持IE＆lt; = 9或Safari＆lt; = 5.0

Answer 2

为了将来的友善，我继续推荐使用polyfill / shim的classList：https://developer.mozilla.org/en-US/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!');
}

Answer 3

以下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/

Answer 4

要添加没有JQuery的类，只需将yourClassName附加到元素className

document.documentElement.className += " yourClassName";

要删除课程，您可以使用replace()功能

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

同样如@DavidThomas所提到的，如果要将类名动态传递给replace函数，则需要使用new RegExp()构造函数。

Answer 5

添加＆amp;删除类（在IE8 +上测试）

将trim（）添加到IE（取自：.trim() in JavaScript not working in 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/

Answer 6

从IE10开始可以使用

classList，如果可以，请使用它。

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

Answer 7

我正在使用以下简单代码执行此任务：

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');
    }
}

Answer 8

尝试一下：

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

  }

Answer 9

令我感到困惑的是，这里没有一个答案突出提到非常有用的 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

Answer 10

更新的JS类方法

add方法不会添加重复的类，而remove方法只会删除具有完全字符串匹配的类。

const addClass = (selector, classList) => {
  const element = document.querySelector(selector);
  const classes = classList.split(' ')
  classes.forEach((item, id) => {
    element.classList.add(item)
  })
}

const removeClass = (selector, classList) => {
  const element = document.querySelector(selector);
  const classes = classList.split(' ')
  classes.forEach((item, id) => {
    element.classList.remove(item)
  })
}

addClass('button.submit', 'text-white color-blue') // add text-white and color-blue classes
removeClass('#home .paragraph', 'text-red bold') // removes text-red and bold classes

Answer 11

当您从等式中删除RegExp时，您会留下更少的友好＆＃34;代码，但它仍然可以用 split（）的（很多）不太优雅的方式来完成。

function removeClass(classString, toRemove) {
    classes = classString.split(' ');
    var out = Array();
    for (var i=0; i<classes.length; i++) {
        if (classes[i].length == 0) // double spaces can create empty elements
            continue;
        if (classes[i] == toRemove) // don't include this one
            continue;
        out.push(classes[i])
    }
    return out.join(' ');
}

此方法比简单的 replace（）大很多，但至少可以在旧版浏览器上使用。如果浏览器甚至不支持 split（）命令，则使用原型添加它相对容易。

如何在没有jQuery的情况下在Javascript中添加和删除类

11 个答案:

更新的JS类方法