Как добавить/удалить класс в JavaScript?

Question

Как добавить/удалить класс в JavaScript?

С element.classList не поддерживается в IE 9 и Safari-5, Что такое альтернативное кросс-браузерное решение?

нет-фреймворков пожалуйста.

решение должны работа в по крайней мере IE 9, сафари 5, FireFox 4, Opera 11.5 и Chrome.

связанные сообщения (но не содержащие решения):

51

cross-browser dom javascript

автор: Community

13 ответов

автор: Yago DLT · Accepted Answer · 2014-11-30 13:32:10

одним из способов игры с классами без фреймворков / библиотек будет использование элемента property.className, который"получает и задает значение атрибута class указанного элемента." (С документация MDN).
As @matías-fidemraizer уже упоминалось в его ответе, как только вы получите строку классов для своего элемента, вы можете использовать любые методы, связанные со строками, чтобы изменить ее.

вот пример:
Предполагая, что у вас есть div с идентификатором " myDiv "и что вы хотите добавить к нему класс" main__section", когда пользователь нажимает на него,

window.onload = init;

function init() {
  document.getElementById("myDiv").onclick = addMyClass;
}

function addMyClass() {
  var classString = this.className; // returns the string of all the classes for myDiv
  var newClass = classString.concat(" main__section"); // Adds the class "main__section" to the string (notice the leading space)
  this.className = newClass; // sets className to the new string
}

автор: emil · Accepted Answer · 2015-02-05 12:42:53

вот решение для addClass, removeClass, hasClass в чистом решении javascript.

на самом деле это от http://jaketrent.com/post/addremove-classes-raw-javascript/

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

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

автор: Paulpro · Accepted Answer · 2017-05-06 16:32:17

Я только что написал это:

function addClass(el, classNameToAdd){
    el.className += ' ' + classNameToAdd;   
}

function removeClass(el, classNameToRemove){
    var elClass = ' ' + el.className + ' ';
    while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
         elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
    }
    el.className = elClass;
}

Я думаю, что они будут работать во всех браузерах.

автор: Wernight · Accepted Answer · 2014-11-18 17:01:45

самый простой способ-это element.classList имеющего remove(name), add(name), toggle(name) и contains(name) методы и теперь поддерживается всеми основными браузерами.

на старше браузеры вы измените element.className. Вот два помощника:--12-->

function addClass(element, className){
    element.className += ' ' + className;   
}

function removeClass(element, className) {
    element.className = element.className.replace(
        new RegExp('( |^)' + className + '( |$)', 'g'), ' ').trim();
}

автор: Matías Fidemraizer · Accepted Answer · 2011-07-22 08:28:50

прочитайте эту статью Mozilla Developer Network:

https://developer.mozilla.org/en/DOM/element.className

С элемент.className свойство имеет тип string, вы можете использовать обычные строковые объектные функции, найденные в любой реализации JavaScript:

если вы хотите добавить класс, сначала используйте String.indexOf чтобы проверить, присутствует ли класс в className. Если нет ... присутствует, просто объедините пустой символ и новое имя класса для этого свойства. Если он присутствует, ничего не делать.
если вы хотите удалить класс, просто использовать String.replace, заменяя "[className] " пустой строкой. Наконец используйте String.trim удалить пустые символы в начале и конце element.className.

автор: Drew · Accepted Answer · 2014-04-15 05:02:08

исправлено решение от @Paulpro

не использовать "класс", так как это зарезервированное слово

автор: Raynos · Accepted Answer · 2011-10-27 18:36:27

решение:

сим .classList:

использовать дом-ШИМ или используйте прокладку Эли Грея ниже

отказ от ответственности: Я считаю, что поддержка FF3.6+, Opera10+, FF5, Chrome, IE8+

/*
 * classList.js: Cross-browser full element.classList implementation.
 * 2011-06-15
 *
 * By Eli Grey, http://eligrey.com
 * Public Domain.
 * NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
 */

/*global self, document, DOMException */

/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js*/

if (typeof document !== "undefined" && !("classList" in document.createElement("a"))) {

(function (view) {

"use strict";

var
      classListProp = "classList"
    , protoProp = "prototype"
    , elemCtrProto = (view.HTMLElement || view.Element)[protoProp]
    , objCtr = Object
    , strTrim = String[protoProp].trim || function () {
        return this.replace(/^\s+|\s+$/g, "");
    }
    , arrIndexOf = Array[protoProp].indexOf || function (item) {
        var
              i = 0
            , len = this.length
        ;
        for (; i < len; i++) {
            if (i in this && this[i] === item) {
                return i;
            }
        }
        return -1;
    }
    // Vendors: please allow content code to instantiate DOMExceptions
    , DOMEx = function (type, message) {
        this.name = type;
        this.code = DOMException[type];
        this.message = message;
    }
    , checkTokenAndGetIndex = function (classList, token) {
        if (token === "") {
            throw new DOMEx(
                  "SYNTAX_ERR"
                , "An invalid or illegal string was specified"
            );
        }
        if (/\s/.test(token)) {
            throw new DOMEx(
                  "INVALID_CHARACTER_ERR"
                , "String contains an invalid character"
            );
        }
        return arrIndexOf.call(classList, token);
    }
    , ClassList = function (elem) {
        var
              trimmedClasses = strTrim.call(elem.className)
            , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
            , i = 0
            , len = classes.length
        ;
        for (; i < len; i++) {
            this.push(classes[i]);
        }
        this._updateClassName = function () {
            elem.className = this.toString();
        };
    }
    , classListProto = ClassList[protoProp] = []
    , classListGetter = function () {
        return new ClassList(this);
    }
;
// Most DOMException implementations don't allow calling DOMException's toString()
// on non-DOMExceptions. Error's toString() is sufficient here.
DOMEx[protoProp] = Error[protoProp];
classListProto.item = function (i) {
    return this[i] || null;
};
classListProto.contains = function (token) {
    token += "";
    return checkTokenAndGetIndex(this, token) !== -1;
};
classListProto.add = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.push(token);
        this._updateClassName();
    }
};
classListProto.remove = function (token) {
    token += "";
    var index = checkTokenAndGetIndex(this, token);
    if (index !== -1) {
        this.splice(index, 1);
        this._updateClassName();
    }
};
classListProto.toggle = function (token) {
    token += "";
    if (checkTokenAndGetIndex(this, token) === -1) {
        this.add(token);
    } else {
        this.remove(token);
    }
};
classListProto.toString = function () {
    return this.join(" ");
};

if (objCtr.defineProperty) {
    var classListPropDesc = {
          get: classListGetter
        , enumerable: true
        , configurable: true
    };
    try {
        objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
    } catch (ex) { // IE 8 doesn't support enumerable:true
        if (ex.number === -0x7FF5EC54) {
            classListPropDesc.enumerable = false;
            objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
        }
    }
} else if (objCtr[protoProp].__defineGetter__) {
    elemCtrProto.__defineGetter__(classListProp, classListGetter);
}

}(self));

}

автор: Sergio Belevskij · Accepted Answer · 2016-03-10 16:22:03

посмотрите на эти oneliners:

удалить класс:
```
element.classList.remove('hidden');
```
Toggle class (это будет добавлено в className, если не так class и удалено, если это)
```
element.classList.toggle('hidden');
```

все! Я делаю тест-10000 итераций. 0.8 сек.

автор: scott_trinh · Accepted Answer · 2016-11-18 20:53:09

function addClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .concat(classString)
        .join(' ');
}

function removeClass(element, classString) {
    element.className = element
        .className
        .split(' ')
        .filter(function (name) { return name !== classString; })
        .join(' ');
}

автор: Joanna Betlej · Accepted Answer · 2017-05-16 11:21:52

на всякий случай, если кто-то хотел бы иметь прототип функции для элементов, это то, что я использую, когда мне нужно манипулировать классами различных объектов:

Element.prototype.addClass = function (classToAdd) {
  var classes = this.className.split(' ')
  if (classes.indexOf(classToAdd) === -1) classes.push(classToAdd)
  this.className = classes.join(' ')
}

Element.prototype.removeClass = function (classToRemove) {
  var classes = this.className.split(' ')
  var idx =classes.indexOf(classToRemove)
  if (idx !== -1) classes.splice(idx,1)
  this.className = classes.join(' ')
}

использовать их как: document.body.addClass('whatever') или document.body.removeClass('whatever')

вместо тела, вы также можете использовать любой другой элемент (как div, span, вы называете его)

автор: vagovszkym · Accepted Answer · 2015-07-10 13:24:15

улучшенная версия кода Эмиля (с trim ())

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\s|^)'+cls+'(\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className = ele.className.trim() + " " + cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\s|^)'+cls+'(\s|$)');
    ele.className = ele.className.replace(reg,' ');
    ele.className = ele.className.trim();
  }
}

автор: reporter · Accepted Answer · 2011-07-22 08:29:59

добавить классы css:cssClassesStr += cssClassName;

удалить классы css:cssClassStr = cssClassStr.replace(cssClassName,"");

добавить атрибут "Classes":object.setAttribute("class", ""); //pure addition of this attribute

удалить атрибутов: object.removeAttribute("class");

автор: Marian07 · Accepted Answer · 2018-09-13 15:56:08

простой для понимания способ:

// Add class 
DOMElement.className += " one";
// Example:
// var el = document.body;
// el.className += " two"

// Remove class 
function removeDOMClass(element, className) {
    var oldClasses      = element.className,
        oldClassesArray = oldClasses.split(" "),
        newClassesArray = [],
        newClasses;

    // Sort
    var currentClassChecked,
        i;     
    for ( i = 0; i < oldClassesArray.length; i++ ) { 
        // Specified class will not be added in the new array
        currentClassChecked = oldClassesArray[i];
        if( currentClassChecked !== className ) { 
            newClassesArray.push(currentClassChecked);
        }
    }

    // Order 
    newClasses = newClassesArray.join(" ");

    // Apply     
    element.className = newClasses;

    return element;

}
// Example:
// var el = document.body;
// removeDOMClass(el, "two")

https://gist.github.com/sorcamarian/ff8db48c4dbf4f5000982072611955a2