Как добавлять и удалять классы в Javascript без jQuery

Ответ 1

В браузерах, которые не поддерживают classList, работают 3 функции:

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/

Ответ 2

Другой подход для добавления класса к элементу с использованием чистого JavaScript

Для добавления класса:

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

Для удаления класса:

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

Примечание:, но не поддерживается в IE <= 9 или Safari <= 5.0

Ответ 3

Для будущей дружелюбия, я второй рекомендации для classList с polyfill/shim: 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!');
}

Ответ 4

Чтобы добавить класс без JQuery, просто добавьте yourClassName к элементу className

document.documentElement.className += " yourClassName";

Чтобы удалить класс, вы можете использовать replace() функцию

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

Также как @DavidThomas упомянул, что вам нужно использовать конструктор new RegExp(), если вы хотите динамически передавать имена классов в функцию replace.

Ответ 5

Добавить и удалить классы (проверены на IE8 +)

Добавьте trim() в IE (взято из .trim() в JavaScript, не работающем в 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/

Ответ 6

classList доступен из IE10 и далее, используйте это, если можете.

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

Ответ 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');
    }
}

Ответ 8

Когда вы удаляете RegExp из уравнения, вы оставляете менее "дружественный" код, но его все же можно выполнить с помощью (намного) менее элегантного способа 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(), относительно легко добавить ее с помощью прототипа.

Ответ 9

Удалить класс с помощью JavaScript

const removeClass = ($el, className) => {
  const _removeClass = function(el) {
    if (el.classList) {
      el.classList.remove(className);
    } else {
      el.className = el.className.replace(
        new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'),
        ' ',
      );
    }
  };
  if ($el.length === 1) {
    _removeClass($el);
  } else if ($el.length > 1) {
    $el.forEach(function(item) {
      _removeClass(item);
    });
  }
};