removeattribute - remove css jquery

jQuery: cambia temporalmente un estilo y luego restablece a la clase original

Question

Digamos que tengo una clase llamada testThing:

.testThing
{
   background-color:#000000;
   float:left;
   height:50px;
   width:50px;
}

Y quiero poder probar un cambio de color de fondo en cualquier control de esa clase con un clic de botón:

function setColor(someColor) 
{
   jQuery(''.testThing'').css(''background-color'', someColor);
}

Pero quiero que el usuario pueda restablecer el color original (haga clic en otro botón) según lo que tenga la clase:

function resetClass()
{
   jQuery(''#currentColor'').removeClass(''testThing'');
   jQuery(''#currentColor'').addClass(''testThing'');
}

Parece que esto funcionaría (Albiet no es la mejor manera de hacerlo) pero el color de fondo del control no se restablece al valor original contenido en esa clase.

Ahora bien, o bien necesito averiguar por qué eliminar para agregar no lo reinicia O simplemente una mejor manera de hacerlo ... viendo lo tonto que parece eliminar y leer la clase ...

Answer 1

¿Qué pasa con toggleClass("testThing") ? Lo uso cuando hay más de una propiedad para cambiar.

http://api.jquery.com/toggleClass/

Answer 2

Es mejor agregar otra clase que anule el estilo que desea cambiar y luego eliminarlo. Es mejor que la información de estilo de codificación dentro de la js. El único problema es que tendrás que asegurarte de que la clase agregada sea de un orden superior para que el elemento tome el estilo de ella en lugar de la clase existente, pero esto no es difícil de garantizar.

Answer 3

Jquery agrega CSS en el atributo de estilo que tiene mayor prioridad que lo que está en su archivo CSS. No está cambiando su documento CSS con esa función y, por lo tanto, agregar y eliminar y agregar la clase no tiene ningún efecto ya que no se ha modificado en absoluto.

Debería usar la misma función, pero establezca el color de fondo en negro esta vez.

function reset(this)
{
  $(this).css(''background-color'', ''#000000'');
}

O simplemente elimine el atributo de estilo

function reset(this)
{
  $(this).removeAttr(''style'');
}

Answer 4

Sé que esto es antiguo, pero puedes establecer el valor en una cadena vacía para eliminar tu estilo personalizado así:

// set
$(this).css(''background-color'', ''#000000'');

// reset
$(this).css(''background-color'', '''');