jQuery cambiando la clase css a div

Question

Si tengo un elemento div por ejemplo y la clase 'first' se define con muchas propiedades css. ¿Puedo asignar css clase 'segundo' que también tiene muchas propiedades definidas de forma diferente para este mismo div solo en algún evento sin escribir cada propiedad en línea.

Answer 1

$(".first").addClass("second"); 

Si desea agregarlo a un evento, puede hacerlo también fácilmente. Un ejemplo con el evento de clic:

$(".first").click(function() { 
    $(this).addClass("second"); 
}); 

Answer 2

Puede agregar y quitar clases con jQuery, así:

$(".first").addClass("second") 
// remove a class 
$(".first").removeClass("second") 

Por el camino se puede establecer varias clases en su margen de beneficio inmediato separados por un espacio en blanco

<div class="second first"></div> 

Answer 3

Sí, fácilmente.

$("#mydiv").attr("class", "second"); 

Answer 4

Esto puede no estar exactamente en el objetivo porque no estoy del todo claro sobre lo que quiere hacer. Sin embargo, asumiendo que quiere decir que desea asignar una clase diferente a un div en respuesta a un evento, la respuesta es sí, ciertamente puede hacer esto con jQuery. No soy más que un principiante jQuery, pero he utilizado el siguiente en mi código:

$(document).ready(function() { 
    $("#someElementID").click(function() { // this is your event 
     $("#divID").addClass("second");  // here your adding the new class 
    )}; 
)}; 

Si desea sustituir la primera clase con la segunda clase, creo que usaría removeClass primero y luego addClass como lo hice encima. toggleClass también puede valer la pena mirar. La documentación de jQuery está bien escrita para este tipo de cambios, con ejemplos.

Alguien más tiene una mejor opción, ¡pero espero que ayude!

Answer 5

Un elemento HTML como div puede tener más de una clase. Digamos que a div se le asignan dos estilos usando el método addClass. Si style1 tiene 3 propiedades como font-size, weight y color, y style2 tiene 4 propiedades como font-size, weight, color y background-color, el conjunto de propiedades efectivas resultantes (style), creo, tendrá 4 propiedades, es decir, unión de todos los conjuntos de estilos. Las propiedades comunes, en nuestro caso, color, tamaño de fuente, peso, tendrán un riesgo con los últimos valores. Si div se asigna style1 primero y style2 segundo, los privilegios comunes se sobrescribirán con los valores de style2.

Además, he escrito un post en Using JQuery to Apply,Remove and Manage Styles, espero que le ayudará a

Saludos Awais

Answer 6

$(document).ready(function() { 

      $("#divId").toggleClass('cssclassname'); // toggle class 
}); 

**OR** 

$(document).ready(function() { 
     $("#objectId").click(function() { // click or other event to change the div class 
       $("#divId").toggleClass("cssclassname");  // toggle class 
     )}; 
)};