¿Cómo cambiar la clase de elementos usando javascript?

¿Cómo puedo cambiar la clase de un elemento HTML en respuesta a un evento onClick usando JavaScript?

2435
12 окт. establecido por Nathan Smith el 12 de octubre 2008-10-12 23:06 '08 a las 11:06 pm 2008-10-12 23:06
@ 32 respuestas
  • 1
  • 2

Métodos modernos de HTML5 para cambiar clases

Los navegadores modernos han agregado classList, que proporciona métodos que facilitan la manipulación de clases sin la 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, no funcionan en Internet Explorer hasta la v10, aunque hay un pad para agregar soporte en IE8 e IE9 disponible en esta página . Esto, sin embargo, es cada vez más apoyado .

Simple solución de navegador cruzado

El método estándar de JavaScript para seleccionar un elemento utiliza document.getElementById("Id") , que se usa en los siguientes ejemplos: puede, por supuesto, obtener elementos de manera diferente, y en la situación correcta, simplemente puede usar this en this lugar, yendo en detalle. Más allá del alcance de la respuesta.

Para cambiar todas las clases de un artículo:

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

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

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

Para agregar una clase extra a un elemento:

Para agregar una clase a un elemento sin eliminar / no afectar los valores existentes, agregue un espacio y un nuevo nombre de clase, por ejemplo:

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

Para eliminar una clase de un elemento:

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

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace ( /(?:^|\s)MyClass(?!\S)/g , '' )  

La explicación para 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 # (ie must be end of string or a space) 

El indicador g indica que el reemplazo se repite según sea necesario si el nombre de la clase se agrega varias veces.

Para verificar si una clase ya está aplicada a un elemento:

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

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


Asignando estas acciones a los eventos onclick:

Aunque puede escribir JavaScript directamente dentro de los atributos de eventos HTML (por ejemplo, onclick="this.className+=' MyClass'" ), no se recomienda este comportamiento. En aplicaciones más grandes, se logra un código más conveniente al dividir el formato HTML en la lógica de interacción de JavaScript.

El primer paso para lograr esto es crear una función y llamar a una 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 que tenga este código en las etiquetas de secuencia de comandos, esto es solo por el ejemplo, y puede ser más apropiado incluir JavaScript en un archivo separado).

El segundo paso es mover el evento onclick desde HTML y a JavaScript, por ejemplo, usando addEventListener

 <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 el contenido de esta función se ejecute después de que se complete la carga de HTML; sin esto, MyElement puede no existir al llamar al código JavaScript para que la cadena no tenga éxito).


Estructuras y bibliotecas de JavaScript

El código anterior está en JavaScript estándar, pero la práctica común es usar una infraestructura o biblioteca para simplificar las tareas comunes, así como el uso de errores corregidos y casos extremos que puede no haber pensado al escribir el código.

Si bien a algunas personas les resulta innecesario agregar un entorno de 50 KB para un simple cambio de clase, si está realizando un trabajo de JavaScript significativo o algo que puede tener un comportamiento inusual entre los navegadores, vale la pena considerarlo.

(En términos generales, una biblioteca es un conjunto de herramientas diseñadas para una tarea específica, mientras que la estructura generalmente contiene varias bibliotecas y realiza un conjunto completo de responsabilidades).

Los ejemplos anteriores se reproducen a continuación utilizando jQuery , posiblemente la biblioteca de JavaScript más utilizada (aunque hay otras que vale la pena explorar).

(Tenga en cuenta que $ aquí es un objeto jQuery.)

Cambio de clases utilizando jQuery:

 $('#MyElement').addClass('MyClass'); $('#MyElement').removeClass('MyClass'); if ( $('#MyElement').hasClass('MyClass') ) 

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

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


Asignando una función a un evento de clic usando jQuery:

 $('#MyElement').click(changeClass); 

o sin requerir un identificador:

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


3486
12 окт. respuesta dada por Peter Boughton el 12 de octubre 2008-10-12 23:45 '08 a las 11:45 pm 2008-10-12 23:45

También puedes simplemente hacer:

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

Y para cambiar la clase (eliminar si todavía hay que agregarlo):

 document.getElementById ('id'). classList.toggle ('class');
391
05 авг. respuesta fue dada por Tyilo 05 ago. 2011-08-05 20:44 '11 a las 20:44 2011-08-05 20:44

En uno de mis proyectos anteriores que no usaba jQuery, creé las siguientes funciones para agregar, eliminar y verificar si el elemento tiene una 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 que onclick agregue alguna clase, puedo usar este botón:

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

Ahora seguro que sería mejor usar jQuery.

104
28 мая '11 в 10:32 2011-05-28 10:32 Andrew Orsich da la respuesta el 28 de mayo de 2011 a las 10:32 2011-05-28 10:32

Puedes usar node.className esta manera:

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

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

68
12 окт. Respuesta dada por Eric Wendelin el 12 de octubre. 2008-10-12 23:33 '08 a las 11:33 2008-10-12 23:33

Wow, sorprendido, hay tantas respuestas desbordantes ...

 <div class="firstClass" onclick="this.className='secondClass'"> 
45
05 янв. Respuesta dada por Travis J 05 Ene. 2012-01-05 22:14 '12 a las 10:14 pm 2012-01-05 22:14

Utilizando 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); } } 
43
20 сент. La respuesta está dada por PseudoNinja 20 sep . 2011-09-20 18:26 '11 a las 18:26 2011-09-20 18:26

Funciona para mi

 function setCSS(eleID) { var currTabElem = document.getElementById(eleID); currTabElem.setAttribute("class", "some_class_name"); currTabElem.setAttribute("className", "some_class_name"); } 
30
08 дек. La respuesta la da Gopal Krishna Ranjan 08 dic. 2011-12-08 12:36 '11 a las 12:36 PM 2011-12-08 12:36

También puede extender el objeto HTMLElement para agregar métodos para agregar, eliminar, cambiar y probar clases ( gist ):

 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 esto (haga clic para agregar o eliminar una clase):

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

Aquí hay una demostración .

17
11 апр. La respuesta se da moka 11 de abril. 2013-04-11 13:13 '13 a las 13:13 2013-04-11 13:13

Para agregar información de otra estructura popular, Google Closures, vea la clase dom / classes :

 goog.dom.classes.add(element, var_args) goog.dom.classes.addRemove(element, classesToRemove, classesToAdd) goog.dom.classes.remove(element, var_args) 

Una de las opciones para elegir un elemento es goog.dom.query con un selector CSS3:

 var myElement = goog.dom.query("#MyElement")[0]; 
15
27 нояб. La respuesta la da Ben Flynn el 27 de noviembre. 2011-11-27 00:04 '11 a las 0:04, 2011-11-27 00:04

Algunas pequeñas notas y ajustes en las expresiones regulares anteriores:

Desea hacer esto globalmente si la lista de clases tiene un nombre de clase más de una vez. Y probablemente desee eliminar los espacios de los extremos de la lista de clases y convertir varios espacios en un solo espacio para evitar espacios. Ninguno de estos problemas debe ser un problema si solo un código que coincida con los nombres de clase utiliza la expresión regular que se muestra a continuación y elimina el nombre antes de agregarlo. Pero Bueno, quién sabe, quién puede aceptar la lista de nombres de clase.

Esta expresión regular no distingue entre mayúsculas y minúsculas, por lo que los errores en los nombres de clase pueden mostrarse antes de que el código se use en un navegador al que no le importa el caso en los nombres de clase.

 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, ' ') + "]"); 
13
02 мая '12 в 7:59 2012-05-02 07:59 La respuesta la da Alex Robinson el 2 de mayo de 2012 a las 7:59 2012-05-02 07:59

Modifique la clase clase CSS usando 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 
12
28 мая '11 в 10:19 2011-05-28 10:19 Hiren Kansara dio respuesta el 28 de mayo de 2011 a las 10:19 2011-05-28 10:19

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 llamada cuando el elemento id se llama algún elemento . La función agrega un clic al atributo de clase del elemento si aún no es parte de él, y lo elimina si está allí.

Sí, debe agregar un enlace 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 esto le ahorrará tiempo en la implementación de su propio código. hacer lo mismo.

Gracias

11
05 мая '12 в 5:46 2012-05-05 05:46 La respuesta se da shingokko 05 May '12 a las 5:46 2012-05-05 05:46

Línea

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

debería ser:

 document.getElementById("MyElement").className = document.getElementById("MyElement").className.replace('/\bMyClass\b/',''); 
9
09 дек. Respuesta dada por Eric Bailey 09 dic. 2009-12-09 01:15 '09 a la 1:15 am 2009-12-09 01:15

Aquí está mi versión, totalmente funcional:

 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")' > 
7
17 окт. La respuesta se da alfred 17 oct. 2012-10-17 15:21 '12 a las 3:21 pm 2012-10-17 15:21

Aquí está la clase toggleClass toggle / add / remove para el 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 vea mi respuesta aquí para crear dinámicamente una nueva clase.

7
28 окт. Respuesta dada por kofifus el 28 de octubre. 2015-10-28 10:00 '15 a las 10:00 2015-10-28 10:00

Cambia la clase de elemento en javascript de vainilla con soporte de IE6

Puede intentar usar la propiedad de attributes nodo para mantener la compatibilidad con navegadores más antiguos incluso en IE6:

 .red { color: red; } .red:before { content: 'I am red! '; } .red:after { content: ' again'; } .blue { color: blue; } .blue:before { content: 'I am blue! ' } 
6
04 нояб. La respuesta la da Eugene Tiurin 04 nov. 2015-11-04 20:57 '15 a las 20:57 2015-11-04 20:57

Utilizo las siguientes funciones de vainilla javascript en mi código. Usan expresiones regulares e indexOf pero no requieren que se indexOf 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 element.classList en navegadores modernos.

5
18 янв. La respuesta la da Salman A el 18 de enero. 2014-01-18 12:28 '14 a las 12:28 2014-01-18 12:28

Esto se puede hacer.

HTML:

 <div class="red" id="text"> <a href="#" onclick="changeClass();">Fahad</a> </div> 

CSS

 .red a{ color:red; } .black a{ color:black; } 

Javascript:

 function changeClass(){ document.getElementById("text").className = "black"; } 

Feeddle

4
03 июля '16 в 17:04 2016-07-03 17:04 Fahad Uddin da la respuesta el 03 de julio de 2016 a las 17:04 2016-07-03 17:04

Si quieres eliminar una clase, puedes hacerlo:

 ELEMENT.classList.remove("CLASS_NAME"); 

Para agregar una clase:

 ELEMENT.classList.add('CLASS_NAME'); 
3
14 нояб. La respuesta la da ferralucho 14 nov. 2017-11-14 03:18 '17 a las 3:18 2017-11-14 03:18

Después de una larga búsqueda, encontré la mejor solución para la gestión de clases sin document.getElementById ()

 var els = [].slice.apply(document.getElementsByClassName("no-js")); for (var i = 0; i < els.length; i++) { els[i].className = els[i].className.replace(/ *\bno-js\b/g, "js"); } 

Punto de partida: delphi-faq.net.site/questions/2069 / ...

1
10 дек. respuesta dada eapo 10 dic. 2016-12-10 02:19 '16 a las 2:19 2016-12-10 02:19

Es bueno que me haya resultado útil.

 function classChangeFn() { document.getElementById("MyElement").className = ""; } window.onload = function(){ document.getElementById("MyElement").addEventListener( 'click' , classChangeFn ); } 
1
11 апр. Respuesta dada por Mohammed Javed el 11 de abril. 2016-04-11 14:59 '16 a las 2:59 pm 2016-04-11 14:59

Desde aquí : https://developer.mozilla.org/en-US/docs/Web/API/Element/classList

Cuando presionas un botón puedes probar:

reemplazar (oldClass, newClass)
Reemplaza una clase existente con una nueva clase.

Ejemplo:

 var myDiv = document.getElementById('myElement'); myDiv.classList.contains('myCssClass'); myDiv.classList.replace("myCssClass", "myCssClass_new"); 
1
27 нояб. La respuesta se da Kurkula 27 de noviembre. 2017-11-27 22:06 '17 a las 10:06 pm 2017-11-27 22:06

Sí, hay muchas maneras de hacer esto. En la sintaxis de ES6 podemos lograrlo fácilmente. Utilice este código para cambiar la clase de agregar y quitar.

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

API classList DOM:

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

 <div class="content wrapper animated" id="main"></div> 

En la revista podemos observar que recibimos un objeto no solo con las clases de elementos, sino también con muchos métodos y propiedades auxiliares. Este objeto se hereda de la interfaz DOMTokenList , una interfaz que se usa en el DOM para representar un conjunto de tokens separados por espacios (por ejemplo, clases).

Ejemplo:

 button{ margin: 20px; } .foo{ color: red; } .newFoo { color: blue; } .bar{ background-color:powderblue; } .newclass{ border: 2px solid green; } 

De acuerdo, creo que en este caso deberías usar jQuery o escribir tus propios métodos en javascript puro, pero prefiero agregar mis propios métodos en lugar de ingresar todos los jQuery en mi aplicación si no lo necesito por otras razones.

Me gustaría hacer algo como a continuación como métodos para mi infraestructura javascript, para agregar alguna funcionalidad que maneje agregar clases, eliminar clases, etc., como jQuery, esto es totalmente compatible con IE9 +, también mi código está escrito en ES6, por lo que debe asegurarse de que su navegador lo admita o está usando algo como babel, de lo contrario, debe usar la sintaxis de ES5 en su código; también de esta manera, encontramos el elemento a través del identificador, lo que significa que el elemento debe seleccionarse identificador

 //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 llamarlos usando, como se muestra a continuación, imagine que su elemento tiene un id y una clase, asegúrese de pasarlos como una cadena, puede usar la utilidad como se muestra a continuación:

 classUtil.addClass('myId', 'myClass'); classUtil.removeClass('myId', 'myClass'); classUtil.hasClass('myId', 'myClass'); classUtil.toggleClass('myId', 'myClass'); 
0
29 мая '17 в 16:29 2017-05-29 16:29 La respuesta es dada por Alireza el 29 de mayo de '17 a las 16:29 2017-05-29 16:29

Solo pensé que lo tiraría en:

 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(' '); } 
0
20 марта '15 в 5:35 2015-03-20 05:35 PHPglue da la respuesta el 20 de marzo de 2015 a las 5:35 de 2015-03-20 05:35

solo diga myElement.classList="new-class" , si no necesita soportar otras clases existentes, en este caso puede usar los métodos classList.add, .remove

 div{ min-height:48px; min-width:48px; } .bordered{ border: 1px solid black; } .green{ background:green; } .blue{ background: blue; } 

Considere un botón que será un elemento html. Deje que la clase se elimine para ser button1, y la clase que se agrega es button2, e id es el botón.

 <button id="button" class="button1" onclick="ClassChange()"> 
0
20 февр. la respuesta la da el usuario 8158111 el 20 de febrero. 2018-02-20 20:09 '18 a las 8:09 pm 2018-02-20 20:09

Código de trabajo de JavaScript:

 <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 el código de trabajo desde este enlace .

-1
05 янв. La respuesta de Sajid es el 5 de enero. 2016-01-05 21:49 '16 a las 21:49 2016-01-05 21:49

Aquí hay un código jQuery simple para esto.

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

Aquí

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

Buena suerte

-4
06 апр. la respuesta se da uttamcafedeweb 06 de abril. 2014-04-06 09:10 '14 a las 9:10 2014-04-06 09:10
  • 1
  • 2

Otras preguntas sobre etiquetas o Haz una pregunta