¿Cómo puedo cambiar la clase de un elemento con JavaScript?

¿Cómo puedo cambiar la clase de un elemento HTML en respuesta a un onclick o cualquier otro evento que use JavaScript?

preguntado Oct 12 '08, 18:10

"El atributo de clase se usa principalmente para señalar una clase en una hoja de estilo. Sin embargo, también puede ser usado por JavaScript (a través del DOM HTML) para realizar cambios en elementos HTML con una clase específica". -w3schools.com/tags/att_standard_class.asp -

element.setAttribute(name, value); Reemplaza name class. Reemplazar value con el nombre que le haya dado a la clase, entre comillas. Esto evita la necesidad de eliminar la clase actual y agregar una diferente. Esto ejemplo de jsFiddle muestra el código de trabajo completo. -

Para cambiar una clase de elemento HTML con onClick, use este código: <input type='button' onclick='addNewClass(this)' value='Create' /> y en la sección de javascript: function addNewClass(elem){ elem.className="newClass"; } En Línea -

@Triynko - ese enlace en w3schools ha cambiado, parece que en septiembre de 2012. Aquí está esa página en Archive.org del 12 / Sep / 2012: Atributo de clase HTML-w3schools. Aquí está el enlace para la página de reemplazo en w3schools.com: Atributo de clase HTML-w3schools. -

30 Respuestas

Técnicas modernas de HTML5 para cambiar de clase

Los navegadores modernos han agregado Lista de clase que proporciona métodos para facilitar la manipulación de clases sin necesidad de una biblioteca:

document.getElementById("MyElement").classList.add('MyClass');

document.getElementById("MyElement").classList.remove('MyClass');

if ( document.getElementById("MyElement").classList.contains('MyClass') )

document.getElementById("MyElement").classList.toggle('MyClass');

Desafortunadamente, estos no funcionan en Internet Explorer antes de v10, aunque hay un calce para agregar soporte para IE8 e IE9, disponible en esta página. Sin embargo, se está volviendo cada vez más apoyadas.

Solución sencilla para varios navegadores

La forma estándar de JavaScript para seleccionar un elemento es usar document.getElementById("Id"), que es lo que usan los siguientes ejemplos: por supuesto, puede obtener elementos de otras formas y, en la situación correcta, simplemente puede usar this en cambio, sin embargo, entrar en detalles sobre esto está más allá del alcance de la respuesta.

Para cambiar todas las clases de un elemento:

Para reemplazar todas las clases existentes con una o más clases nuevas, establezca el atributo className:

document.getElementById("MyElement").className = "MyClass";

(Puede utilizar una lista delimitada por espacios para aplicar varias clases).

Para agregar una clase adicional a un elemento:

Para agregar una clase a un elemento, sin eliminar / afectar los valores existentes, agregue un espacio y el nuevo nombre de clase, así:

document.getElementById("MyElement").className += " MyClass";

Para eliminar una clase de un elemento:

Para eliminar una sola clase de un elemento, sin afectar a otras clases potenciales, se requiere un simple reemplazo de expresiones regulares:

document.getElementById("MyElement").className =
   document.getElementById("MyElement").className.replace
      ( /(?:^|\s)MyClass(?!\S)/g , '' )
/* Code wrapped for readability - above is all one statement */

Una explicación de esta expresión regular es la siguiente:

(?:^|\s) # Match the start of the string or any single whitespace character

MyClass  # The literal text for the classname to remove

(?!\S)   # Negative lookahead to verify the above is the whole classname
         # Ensures there is no non-space character following
         # (i.e. must be the end of the string or space)

LA g La bandera le dice al reemplazo que se repita según sea necesario, en caso de que el nombre de la clase se haya agregado varias veces.

Para comprobar si una clase ya se aplica a un elemento:

La misma expresión regular utilizada anteriormente para eliminar una clase también se puede usar como una verificación de si existe una clase en particular:

if ( document.getElementById("MyElement").className.match(/(?:^|\s)MyClass(?!\S)/) )

### Asignación de estas acciones a eventos onclick:

Si bien es posible escribir JavaScript directamente dentro de los atributos del evento HTML (como onclick="this.className+=' MyClass'") este no es un comportamiento recomendado. Especialmente en aplicaciones más grandes, se logra un código más fácil de mantener al separar el marcado HTML de la lógica de interacción de JavaScript.

El primer paso para lograr esto es crear una función y llamar a la función en el atributo onclick, por ejemplo:

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }
</script>
...
<button onclick="changeClass()">My Button</button>

(No es necesario tener este código en las etiquetas de script, esto es simplemente por la brevedad del ejemplo, e incluir el JavaScript en un archivo distinto puede ser más apropiado).

El segundo paso es mover el evento onclick fuera del HTML y en JavaScript, por ejemplo, usando agregarEventListener

<script type="text/javascript">
    function changeClass(){
        // Code examples from above
    }

    window.onload = function(){
        document.getElementById("MyElement").addEventListener( 'click', changeClass);
    }
</script>
...
<button id="MyElement">My Button</button>

(Tenga en cuenta que la parte window.onload es necesaria para que se ejecuten los contenidos de esa función después de el HTML ha terminado de cargarse; sin esto, MyElement podría no existir cuando se llama al código JavaScript, por lo que esa línea fallaría).


Marcos y bibliotecas de JavaScript

El código anterior está todo en JavaScript estándar, sin embargo, es una práctica común usar un marco o una biblioteca para simplificar las tareas comunes, así como también beneficiarse de errores corregidos y casos extremos en los que quizás no piense al escribir su código.

Si bien algunas personas consideran excesivo agregar un marco de ~ 50 KB para simplemente cambiar una clase, si está haciendo una cantidad sustancial de trabajo de JavaScript o cualquier cosa que pueda tener un comportamiento inusual entre navegadores, vale la pena considerarlo.

(A grandes rasgos, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que un marco generalmente contiene varias bibliotecas y realiza un conjunto completo de funciones).

Los ejemplos anteriores se han reproducido a continuación utilizando jQuery, probablemente la biblioteca de JavaScript más utilizada (aunque también hay otras que vale la pena investigar).

(Tenga en cuenta que $ aquí está el objeto jQuery).

Cambio de clases con jQuery:

$('#MyElement').addClass('MyClass');

$('#MyElement').removeClass('MyClass');

if ( $('#MyElement').hasClass('MyClass') )

Además, jQuery proporciona un atajo para agregar una clase si no se aplica, o eliminar una clase que sí:

$('#MyElement').toggleClass('MyClass');

### Asignar una función a un evento de clic con jQuery:
$('#MyElement').click(changeClass);

o, sin necesidad de identificación:

$(':button:contains(My Button)').click(changeClass);

Respondido el 15 de diciembre de 20 a las 10:12

Gran respuesta Peter. Una pregunta ... ¿por qué es mejor que ver con JQuery que con Javascript? JQuery es genial, pero si esto es todo lo que necesita hacer, ¿qué justifica incluir toda la biblioteca de JQuery en lugar de unas pocas líneas de JavaScript? - Mattstuehler

@mattstuehler 1) la frase "mejor aún x" a menudo significa "mejor aún (puedes) x". 2) Para llegar al meollo del asunto, jQuery está diseñado para ayudar a acceder / manipular el DOM, y muy a menudo si necesita hacer este tipo de cosas una vez que tiene que hacerlo por todas partes. - Barry

Un error con esta solución: cuando hace clic en su botón varias veces, agregará la Clase de "MyClass" al elemento varias veces, en lugar de verificar si ya existe. Por lo tanto, podría terminar con un atributo de clase HTML con un aspecto similar a este: class="button MyClass MyClass MyClass" - Diseñador web

Si está intentando eliminar una clase 'myClass' y tiene una clase 'prefix-myClass', la expresión regular que dio anteriormente para eliminar una clase lo dejará con 'prefix-' en su className: O - jinglesthula

Vaya, tres años y 183 votos a favor y nadie se dio cuenta hasta ahora. Gracias jinglesthula, he corregido la expresión regular para que no elimine incorrectamente partes de los nombres de las clases. // Supongo que este es un buen ejemplo de por qué vale la pena usar un Framework (como jQuery): errores como este se detectan y solucionan antes, y no requieren cambios en el código normal. - Pedro Boughton

También puedes hacer:

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Y para alternar una clase (eliminar si existe, sino agregarla):

document.getElementById('id').classList.toggle('class');

Respondido 04 Abr '20, 20:04

Creo que esto depende de HTML5. - Juan

Necesitarás Eli Grey's classList calce. - ELLIOTTCABLE

Mozilla Developer Network afirma que no funciona, de forma nativa, en Exploradores de Internet de menos de 10. Encuentro que la afirmación es cierta, en mis pruebas. Aparentemente, el Calzo Eli Grey es necesario para Internet Explorer 8-9. Desafortunadamente, no pude encontrarlo en su sitio (incluso con la búsqueda). La corrección está disponible en el enlace de Mozilla. - dobleJ

atow "classList" tiene soporte parcial en IE10 +; sin soporte para Opera Mini; más soporte completo en los navegadores estándar restantes: caniuse.com/#search=lista de clases - nick humphrey

En uno de mis proyectos anteriores que no usaba jQuery, construí las siguientes funciones para agregar, eliminar y verificar si el elemento tiene clase:

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

Entonces, por ejemplo, si quiero onclick para agregar algo de clase al botón, puedo usar esto:

<script type="text/javascript">
    function changeClass(btn, cls) {
        if(!hasClass(btn, cls)) {
            addClass(btn, cls);
        }
    }
</script>
...
<button onclick="changeClass(this, "someClass")">My Button</button>

A estas alturas seguro que sería mejor usar jQuery.

Respondido 06 ago 19, 14:08

Esto es ideal para cuando su cliente no le permite usar jQuery. (Porque casi terminas construyendo tu propia biblioteca). Mike

@Mike Si el cliente no le permite usar jQuery, ¿no podría simplemente revisar y reconstruir solo las características que necesita en su propia biblioteca? - kfrncs

@kfrncs Porque generalmente no necesito un marco tan grande. Para el proyecto en el que estaba pensando, las únicas funciones que necesitaba eran las 3 funciones de nombre de clase (tiene, agregar, quitar) y las funciones de cookie (tiene, agregar, quitar). Todo lo demás era personalizado o bien soportado de forma nativa. Así que todo junto tenía solo 150 líneas antes de minificar, incluidos los comentarios. - Mike

Amigo, son las 4 am y muchas gracias. Vanilla JS es lo que usamos en mi proyecto y esto me salvó la vida. - MenosQuesar

Esta es mi solución favorita para esto. Lo uso en todas partes. Creo que es la forma más elegante de lograr agregar y quitar clases cuando tu proyecto aún no tiene otra forma de hacerlo. - WebWanderer

Puedes usar node.className al igual que:

document.getElementById('foo').className = 'bar';

Esto debería funcionar en IE5.5 y posteriores de acuerdo con PPK.

Respondido 22 ago 12, 01:08

esto sobrescribiría todas y cada una de las demás clases del objeto ... así que no es tan simple. - eric sebasta

Vaya, me sorprende que haya tantas respuestas exageradas aquí ...

<div class="firstClass" onclick="this.className='secondClass'">

Respondido 20 Oct 14, 00:10

Yo diría que javascript discreto es una práctica terrible para escribir código de ejemplo ... - Gabe

No estaría de acuerdo, porque creo que el código de ejemplo debería ser un buen ejemplo. - thomasrutter

Un buen ejemplo debería instruir y despertar la imaginación al mismo tiempo. No debe reemplazar el pensamiento, sino inspirarlo. - antonio rutledge

Las otras respuestas no son exageradas, también mantienen las clases existentes en el elemento. - campbell

Usando código JavaScript puro:

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

function addClass(ele, cls) {
    if (!this.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, ' ');
    }
}

function replaceClass(ele, oldClass, newClass){
    if(hasClass(ele, oldClass)){
        removeClass(ele, oldClass);
        addClass(ele, newClass);
    }
    return;
}

function toggleClass(ele, cls1, cls2){
    if(hasClass(ele, cls1)){
        replaceClass(ele, cls1, cls2);
    }else if(hasClass(ele, cls2)){
        replaceClass(ele, cls2, cls1);
    }else{
        addClass(ele, cls1);
    }
}

Respondido el 11 de junio de 12 a las 16:06

Esto es trabajo para mí:

function setCSS(eleID) {
    var currTabElem = document.getElementById(eleID);

    currTabElem.setAttribute("class", "some_class_name");
    currTabElem.setAttribute("className", "some_class_name");
}

Respondido el 11 de junio de 12 a las 17:06

¡Excelente respuesta! Solo queda para agregar: Establecer para cada nombre de clase CSS para que el selector especifique un estilo para un grupo de elementos de clase - Polonia romana.

Esto me funciona en FF, pero cuando intenté usar el.className = "newStyle"; no funcionó, ¿por qué? - Lukasz 'Severiaan' Grela

Puedes usar el.setAttribute('class', newClass) o mejor el.className = newClass. Pero no el.setAttribute('className', newClass). - Oriol

También puede extender el objeto HTMLElement, para agregar métodos para agregar, eliminar, alternar y verificar clases (esencia):

HTMLElement = typeof(HTMLElement) != 'undefiend' ? HTMLElement : Element;

HTMLElement.prototype.addClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    if (string[i] && !new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)').test(this.className)) {
      this.className = this.className.trim() + ' ' + string[i];
    }
  }
}

HTMLElement.prototype.removeClass = function(string) {
  if (!(string instanceof Array)) {
    string = string.split(' ');
  }
  for(var i = 0, len = string.length; i < len; ++i) {
    this.className = this.className.replace(new RegExp('(\\s+|^)' + string[i] + '(\\s+|$)'), ' ').trim();
  }
}

HTMLElement.prototype.toggleClass = function(string) {
  if (string) {
    if (new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className)) {
      this.className = this.className.replace(new RegExp('(\\s+|^)' + string + '(\\s+|$)'), ' ').trim();
    } else {
      this.className = this.className.trim() + ' ' + string;
    }
  }
}

HTMLElement.prototype.hasClass = function(string) {
  return string && new RegExp('(\\s+|^)' + string + '(\\s+|$)').test(this.className);
}

Y luego use así (al hacer clic se agregará o eliminará la clase):

document.getElementById('yourElementId').onclick = function() {
  this.toggleClass('active');
}

Esta es manifestación.

Respondido 11 Abr '13, 11:04

este es un poco detallado ... aquí hay una solución muy concisa ...jsfiddle.net/jdniki/UaT3P - cero_cool

Lo siento @Jackson_Sandland, pero te has perdido totalmente el punto, que es no usar jQuery en absoluto. - moca

Solo para agregar información de otro marco popular, Google Closures, consulte su dom / clases clase:

goog.dom.classes.add(element, var_args)

goog.dom.classes.addRemove(element, classesToRemove, classesToAdd)

goog.dom.classes.remove(element, var_args)

Una opción para seleccionar el elemento es usar goog.dom.consulta con un selector CSS3:

var myElement = goog.dom.query("#MyElement")[0];

respondido 26 nov., 11:21

Un par de notas menores y ajustes en las expresiones regulares anteriores:

Querrá hacerlo globalmente en caso de que la lista de clases tenga el nombre de la clase más de una vez. Y, probablemente, querrá eliminar espacios de los extremos de la lista de clases y convertir varios espacios en un espacio para evitar que se acumulen espacios. Ninguna de estas cosas debería ser un problema si el único código que contiene los nombres de las clases usa la expresión regular a continuación y elimina un nombre antes de agregarlo. Pero. Bueno, quién sabe quién podría estar jugando con la lista de nombres de clases.

Esta expresión regular no distingue entre mayúsculas y minúsculas, por lo que los errores en los nombres de las clases pueden aparecer antes de que se utilice el código en un navegador que no se preocupa por las mayúsculas en los nombres de las clases.

var s = "testing   one   four  one  two";
var cls = "one";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "test";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "testing";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");
var cls = "tWo";
var rg          = new RegExp("(^|\\s+)" + cls + "(\\s+|$)", 'ig');
alert("[" + s.replace(rg, ' ') + "]");

respondido 22 nov., 16:22

Cambiar la clase CSS de un elemento con JavaScript en ASP.NET:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not Page.IsPostBack Then
        lbSave.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbSave.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
        lbCancel.Attributes.Add("onmouseover", "this.className = 'LinkButtonStyle1'")
        lbCancel.Attributes.Add("onmouseout", "this.className = 'LinkButtonStyle'")
    End If
End Sub

Respondido el 06 de enero de 13 a las 18:01

Usaría jQuery y escribiría algo como esto:

jQuery(function($) {
    $("#some-element").click(function() {
        $(this).toggleClass("clicked");
    });
});

Este código agrega una función para ser llamada cuando un elemento del id algún elemento se hace clic. La función agrega clickeado al atributo de clase del elemento si aún no forma parte de él, y lo elimina si está allí.

Sí, necesita agregar una referencia a la biblioteca jQuery en su página para usar este código, pero al menos puede estar seguro de que la mayoría de las funciones de la biblioteca funcionarán en casi todos los navegadores modernos, y le ahorrará tiempo al implementar su propio código para hacer lo mismo.

Muchas Gracias

Respondido 25 Oct 13, 03:10

Solo tienes que escribir jQuery en su forma larga una vez. jQuery(function($) { }); hace $ disponible dentro de la función en todos los casos. - ladrónmaestro

La línea

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace(/\bMyClass\b/','')

debiera ser:

document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/','');

contestado el 24 de mayo de 11 a las 17:05

Incorrecto. La expresión regular está delimitada por las barras diagonales. Agregar comillas hace que falle en IE, devolviendo la cadena de la clase que está tratando de eliminar en lugar de eliminar la clase. - Dylan

Cambiar la clase de un elemento en JavaScript vanilla con soporte IE6

Puede intentar usar node attributes propiedad para mantener la compatibilidad con navegadores antiguos, incluso IE6:

function getClassNode(element) {
  for (var i = element.attributes.length; i--;)
    if (element.attributes[i].nodeName === 'class')
      return element.attributes[i];
}

function removeClass(classNode, className) {
  var index, classList = classNode.value.split(' ');
  if ((index = classList.indexOf(className)) > -1) {
    classList.splice(index, 1);
    classNode.value = classList.join(' ');
  }
}

function hasClass(classNode, className) {
  return classNode.value.indexOf(className) > -1;
}

function addClass(classNode, className) {
  if (!hasClass(classNode, className))
    classNode.value += ' ' + className;
}

document.getElementById('message').addEventListener('click', function() {
  var classNode = getClassNode(this);
  var className = hasClass(classNode, 'red') && 'blue' || 'red';

  removeClass(classNode, 'red');
  removeClass(classNode, 'blue');

  addClass(classNode, className);
})
.red {
  color: red;
}
.red:before {
  content: 'I am red! ';
}
.red:after {
  content: ' again';
}
.blue {
  color: blue;
}
.blue:before {
  content: 'I am blue! '
}
<span id="message" class="">Click me</span>

Respondido el 07 de enero de 16 a las 18:01

Aquí está mi versión, en pleno funcionamiento:

function addHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    obj.className += " " + classname
}

function removeHTMLClass(item, classname) {
    var obj = item
    if (typeof item=="string") {
        obj = document.getElementById(item)
    }
    var classes = ""+obj.className
    while (classes.indexOf(classname)>-1) {
        classes = classes.replace (classname, "")
    }
    obj.className = classes
}

Uso:

<tr onmouseover='addHTMLClass(this,"clsSelected")'
onmouseout='removeHTMLClass(this,"clsSelected")' >

Respondido el 06 de enero de 13 a las 18:01

Eso romperá la clase foobar si intentas quitar la clase foo. El JS en los atributos intrínsecos del controlador de eventos se rompió antes de editarse. La respuesta aceptada para niños de 4 años es mucho mejor. - Quentin

gracias, lo arreglé (no el problema del prefijo). es la respuesta antigua aceptada que tiene un error con la expresión regular. - Alfredo

El código todavía tiene el foobar problema. Ver la prueba aquí - rosell.dk

Aquí hay un toggleClass para alternar / agregar / eliminar una clase en un elemento:

// If newState is provided add/remove theClass accordingly, otherwise toggle theClass
function toggleClass(elem, theClass, newState) {
    var matchRegExp = new RegExp('(?:^|\\s)' + theClass + '(?!\\S)', 'g');
    var add=(arguments.length>2 ? newState : (elem.className.match(matchRegExp) == null));

    elem.className=elem.className.replace(matchRegExp, ''); // clear all
    if (add) elem.className += ' ' + theClass;
}

ver jsFiddle

también mira mi respuesta aquí para crear una nueva clase de forma dinámica

contestado el 23 de mayo de 17 a las 13:05

Utilizo las siguientes funciones de JavaScript vanilla en mi código. Usan expresiones regulares y indexOf pero no es necesario citar caracteres especiales en expresiones regulares.

function addClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) < 0) {
        el.className = (c0 + c1).replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

function delClass(el, cn) {
    var c0 = (" " + el.className + " ").replace(/\s+/g, " "),
        c1 = (" " + cn + " ").replace(/\s+/g, " ");
    if (c0.indexOf(c1) >= 0) {
        el.className = c0.replace(c1, " ").replace(/\s+/g, " ").replace(/^ | $/g, "");
    }
}

También puedes usar elemento.classList En los navegadores modernos.

Respondido el 18 de enero de 14 a las 09:01


LAS OPCIONES.

Aquí hay algunos ejemplos de estilo versus classList para que vea cuáles son las opciones que tiene disponibles y cómo usar classList para hacer lo que quieras.

style vs classList

La diferencia entre los style y classList es eso con style está agregando a las propiedades de estilo del elemento, pero classList está controlando un poco la (s) clase (s) del elemento (add, remove, toggle, contain), Le mostraré cómo utilizar el add y remove método ya que esos son los más populares.


Ejemplo de estilo

Si desea agregar margin-top propiedad en un elemento, lo haría en tal:

// Get the Element
const el = document.querySelector('#element');

// Add CSS property 
el.style.margintop = "0px"
el.style.margintop = "25px" // This would add a 25px to the top of the element.

Ejemplo de classList

Digamos que tenemos un <div class="class-a class-b">, en este caso, ya tenemos 2 clases agregadas a nuestro elemento div, class-a y class-by queremos controlar qué clases remove y que clase a add. Aquí es donde classList se vuelve útil.

Elimine class-b

// Get the Element
const el = document.querySelector('#element');

// Remove class-b style from the element
el.classList.remove("class-b")

Añada class-c

// Get the Element
const el = document.querySelector('#element');

// Add class-b style from the element
el.classList.add("class-c")


Respondido el 20 de junio de 20 a las 10:06

La pregunta de OP fue ¿Cómo puedo cambiar la clase de un elemento con JavaScript?

Los navegadores modernos le permiten hacer esto con una línea de javascript:

document.getElementById('id').classList.replace('span1','span2')

LA classList atributo proporciona un DOMTokenList que tiene un variedad de métodos. Puede operar en classList de un elemento usando manipulaciones simples como añadir(), eliminar() or reemplazar(). O sea muy sofisticado y manipule las clases como lo haría con un objeto o un mapa con llaves(), valores (), entradas ()

La respuesta de Peter Boughton es genial, pero ahora tiene más de una década. Todos los navegadores modernos ahora son compatibles con DOMTokenList; consulte https://caniuse.com/#search=classList e incluso IE11 admite algunos métodos DOMTokenList

contestado el 04 de mayo de 20 a las 01:05

Solo pensé en incluir esto:

function inArray(val, ary){
  for(var i=0,l=ary.length; i<l; i++){
    if(ary[i] === val){
      return true;
    }
  }
  return false;
}
function removeClassName(classNameS, fromElement){
  var x = classNameS.split(/\s/), s = fromElement.className.split(/\s/), r = [];
  for(var i=0,l=s.length; i<l; i++){
    if(!iA(s[i], x))r.push(s[i]);
  }
  fromElement.className = r.join(' ');
}
function addClassName(classNameS, toElement){
  var s = toElement.className.split(/\s/);
  s.push(c); toElement.className = s.join(' ');
}

respondido 20 mar '15, 02:03

sólo decir myElement.classList="new-class" a menos que necesite mantener otras clases existentes, en cuyo caso puede utilizar el classList.add, .remove métodos.

var doc = document;
var divOne = doc.getElementById("one");
var goButton = doc.getElementById("go");

goButton.addEventListener("click", function() {
  divOne.classList="blue";
});
div{
  min-height:48px;
  min-width:48px;
}
.bordered{
  border: 1px solid black;
}
.green{
  background:green;
}
.blue{
  background: blue;
}
<button id="go">Change Class</button>

<div id="one" class="bordered green">

</div>

Respondido 21 Abr '17, 03:04

De acuerdo, creo que en este caso debería usar jQuery o escribir sus propios métodos en javascript puro, mi preferencia es agregar mis propios métodos en lugar de inyectar todo jQuery a mi aplicación si no lo necesito por otras razones.

Me gustaría hacer algo como a continuación como métodos para mi marco de javascript para agregar algunas funcionalidades que manejan agregar clases, eliminar clases, etc., similar a jQuery, esto es totalmente compatible con IE9 +, también mi código está escrito en ES6, por lo que necesita para asegurarse de que su navegador lo admita o que use algo como babel, de lo contrario, debe usar la sintaxis ES5 en su código, también de esta manera, encontramos el elemento a través de ID, lo que significa que el elemento debe tener una ID para ser seleccionado:

//simple javascript utils for class management in ES6
var classUtil = {

  addClass: (id, cl) => {
    document.getElementById(id).classList.add(cl);
  },

  removeClass: (id, cl) => {
    document.getElementById(id).classList.remove(cl);
  },

  hasClass: (id, cl) => {
    return document.getElementById(id).classList.contains(cl);
  },

  toggleClass: (id, cl) => {
    document.getElementById(id).classList.toggle(cl);
  }

}

y simplemente puede llamar a usarlos como se muestra a continuación, imagine que su elemento tiene la identificación de 'id' y la clase de 'clase', asegúrese de pasarlos como una cadena, puede usar la utilidad de la siguiente manera:

classUtil.addClass('myId', 'myClass');
classUtil.removeClass('myId', 'myClass');
classUtil.hasClass('myId', 'myClass');
classUtil.toggleClass('myId', 'myClass');

Respondido el 24 de junio de 17 a las 04:06

classList API DOM:

Una forma muy conveniente de agregar y eliminar clases es la classList DOM API. Esta API nos permite seleccionar todas las clases de un elemento DOM específico para modificar la lista usando javascript. Por ejemplo:

const el = document.getElementById("main");
console.log(el.classList);
<div class="content wrapper animated" id="main"></div>

Podemos observar en el log que estamos recuperando un objeto no solo con las clases del elemento, sino también con muchos métodos y propiedades auxiliares. Este objeto hereda de la interfaz Lista de tokens DOMT, una interfaz que se utiliza en el DOM para representar un conjunto de tokens separados por espacios (como clases).

Ejemplo:

const el = document.getElementById('container');


function addClass () {
   el.classList.add('newclass');
}


function replaceClass () {
     el.classList.replace('foo', 'newFoo');
}


function removeClass () {
       el.classList.remove('bar');
}
button{
  margin: 20px;
}

.foo{
  color: red;
}

.newFoo {
  color: blue;
}

.bar{
  background-color:powderblue;
}

.newclass{
  border: 2px solid green;
}
<div class="foo bar" id="container">
  "Sed ut perspiciatis unde omnis 
  iste natus error sit voluptatem accusantium doloremque laudantium, 
  totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
  quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
  voluptatem quia voluptas 
 </div>
  
<button onclick="addClass()">AddClass</button>
  
<button onclick="replaceClass()">ReplaceClass</button>
  
<button onclick="removeClass()">removeClass</button>
  

Respondido el 21 de Septiembre de 18 a las 10:09

Sí, hay muchas formas de hacer esto. En la sintaxis de ES6 lo podemos lograr fácilmente. Use este código para alternar agregar y quitar clases.

const tabs=document.querySelectorAll('.menu li');

for(let tab of tabs){
  
  tab.onclick=function(){
    
  let activetab=document.querySelectorAll('li.active');
    
  activetab[0].classList.remove('active')
  
    tab.classList.add('active'); 
  }
  
}
body {
    padding:20px;
    font-family:sans-serif;    
}

ul {
    margin:20px 0;
    list-style:none;
}

li {
    background:#dfdfdf;
    padding:10px;
    margin:6px 0;
    cursor:pointer;
}

li.active {
    background:#2794c7;
    font-weight:bold;
    color:#ffffff;
}
<i>Please click an item:</i>

<ul class="menu">
  <li class="active"><span>Three</span></li>
  <li><span>Two</span></li>
  <li><span>One</span></li>
</ul>

Respondido 06 Feb 19, 14:02

function classed(el, class_name, add_class) {
  const re = new RegExp("(?:^|\\s)" + class_name + "(?!\\S)", "g");
  if (add_class && !el.className.match(re)) el.className += " " + class_name
  else if (!add_class) el.className = el.className.replace(re, '');
}

el uso de la respuesta aceptada anterior aquí es una función simple de varios navegadores para agregar y eliminar la clase

agregar clase:

classed(document.getElementById("denis"), "active", true)

eliminar clase:

classed(document.getElementById("denis"), "active", false)

Respondido el 04 de Septiembre de 19 a las 16:09

Muchas respuestas, muchas buenas respuestas.

TL; DR:

document.getElementById('id').className = 'class'

OR

document.getElementById('id').classList.add('class');
document.getElementById('id').classList.remove('class');

Eso es.

Y, si realmente quieres saber el por qué y educarte, te sugiero que leas La respuesta de Peter Boughton, es perfecto.

Nota:
Esto es posible con (documento or evento):

  • getElementById()
  • getElementsByClassName()
  • querySelector()
  • querySelectorAll()

Respondido 17 Oct 19, 23:10

Hay una propiedad nombre de la clase en javascript para cambiar el nombre de la clase de un elemento HTML. El valor de la clase existente será reemplazado por el nuevo, que ha asignado en className.

<!DOCTYPE html>
<html>
<head>
<title>How to change class of an HTML element in Javascript?</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h1 align="center"><i class="fa fa-home" id="icon"></i></h1><br />

<center><button id="change-class">Change Class</button></center>

<script>
var change_class=document.getElementById("change-class");
change_class.onclick=function()
{
    var icon=document.getElementById("icon");
    icon.className="fa fa-gear";
}

</script>
</body>
</html>

Crédito - https://jaischool.com/javascript-lang/how-to-change-class-name-of-an-html-element-in-javascript.html

respondido 20 mar '20, 12:03

try

element.className='second'

function change(box) { box.className='second' }
.first  { width:  70px; height:  70px; background: #ff0                 }
.second { width: 150px; height: 150px; background: #f00; transition: 1s }
<div onclick="change(this)" class="first">Click me</div>

contestado el 08 de mayo de 20 a las 09:05

Código JavaScript de trabajo:

<div id="div_add" class="div_add">Add class from Javascript</div>
<div id="div_replace" class="div_replace">Replace class from Javascript</div>
<div id="div_remove" class="div_remove">Remove class from Javascript</div>
<button onClick="div_add_class();">Add class from Javascript</button>
<button onClick="div_replace_class();">Replace class from Javascript</button>
<button onClick="div_remove_class();">Remove class from Javascript</button>
<script type="text/javascript">
    function div_add_class()
    {
        document.getElementById("div_add").className += " div_added";
    }
    function div_replace_class()
    {
        document.getElementById("div_replace").className = "div_replaced";
    }
    function div_remove_class()
    {
        document.getElementById("div_remove").className = "";
    }
</script>

Puede descargar un código de trabajo desde este enlace.

respondido 22 nov., 16:22

Esto romperá elementos con más de una clase. - campbell

Aquí hay un código jQuery simple para hacer eso.

$(".class1").click(function(argument) {
    $(".parentclass").removeClass("classtoremove");
    setTimeout(function (argument) {
        $(".parentclass").addClass("classtoadd");
    }, 100);
});

Aquí,

  • Class1 es un oyente de un evento.
  • La clase principal es la clase que aloja la clase que desea cambiar.
  • Classtoremove es la clase anterior que tienes.
  • La clase para agregar es la nueva clase que desea agregar.
  • 100 es el tiempo de espera durante el cual se cambia la clase.

Buena Suerte.

Respondido 19 Jul 14, 14:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.