quitar - ¿Cómo agregar/eliminar una clase en JavaScript?

quitar atributo class jquery

Question

Dado que element.classList no es compatible con IE 9 y Safari-5, ¿qué es una solución alternativa para element.classList navegadores?

No-frameworks por favor.

La solución debe funcionar al menos en IE 9 , Safari 5 , FireFox 4, Opera 11.5 y Chrome.

Publicaciones relacionadas (pero no contiene solución):

1. cómo agregar y eliminar la clase css

2. Agregar y eliminar una clase con animación

3. Añadir eliminar clase?

Answer 1

Aquí hay una solución para addClass, removeClass, hasClass en la solución javascript pura.

En realidad es de 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,'' '');
  }
}

Answer 2

El más simple es element.classList que tiene remove(name) , add(name) , toggle(name) , y contains(name) métodos y ahora es compatible con todos los principales navegadores .

Para los navegadores más antiguos, usted cambia element.className . Aquí hay dos ayudantes:

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

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

Answer 3

En caso de que a alguien le guste tener funciones prototipo creadas para elementos, esto es lo que uso cuando necesito manipular clases de diferentes objetos:

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

Úselos como: document.body.addClass(''whatever'') o document.body.removeClass(''whatever'')

En lugar de cuerpo también puedes usar cualquier otro elemento (div, span, lo que quieras)

Answer 4

La solución es

Shim .classList :

O usa el DOM-shim o utiliza el shim de Eli Gray a continuación

Descargo de responsabilidad: creo que el soporte es 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));

}

Answer 5

Lea este artículo de Mozilla Developer Network:

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

Como la propiedad element.className es de tipo cadena, puede utilizar las funciones regulares de objetos String que se encuentran en cualquier implementación de JavaScript:

• Si desea agregar una clase, primero use String.indexOf para verificar si la clase está presente en className . Si no está presente, simplemente concatenar un carácter en blanco y el nuevo nombre de clase a esta propiedad. Si está presente, no hagas nada.

• Si desea eliminar una clase, simplemente use String.replace , reemplazando "[className]" con una cadena vacía. Finalmente use String.trim para eliminar los caracteres en blanco al comienzo y al final de element.className .

Answer 6

Mire estos oneliners:

1. Eliminar clase:

   element.classList.remove(''hidden'');

2. Alternar clase (esto se agregará a className si no es así clase y eliminado si es)

   element.classList.toggle(''hidden'');

¡Todo! Estoy haciendo una prueba: 10000 iteraciones. 0.8s.

Answer 7

Se corrigió la solución de @Paulpro

1. No use "clase", ya que es una palabra reservada
2. removeClass función removeClass se rompió, ya que se bloqueó después de un uso repetido.

`

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

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

Answer 8

Simplemente escribí esto:

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

Creo que funcionarán en todos los navegadores.

Answer 9

Una forma de jugar con las clases sin marcos / bibliotecas sería usando la propiedad Element.className, que " obtiene y establece el valor del atributo de clase del elemento especificado " (de la documentación de MDN ).
Como @ matías-fidemraizer ya se mencionó en su respuesta, una vez que obtenga la cadena de clases para su elemento, puede usar cualquier método asociado con las cadenas para modificarlo.

Aquí hay un ejemplo:
Suponiendo que tiene un div con el ID "myDiv" y que desea agregarle la clase "main__section" cuando el usuario hace clic en él,

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
}

Answer 10

Versión mejorada del código de emil (con 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();
  }
}

Answer 11

agregar clases css: cssClassesStr += cssClassName;

eliminar clases css: cssClassStr = cssClassStr.replace(cssClassName,"");

agregar atributo ''Clases'': object.setAttribute("class", ""); //pure addition of this attribute object.setAttribute("class", ""); //pure addition of this attribute

eliminar atributo: object.removeAttribute("class");

Answer 12

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