18 Pregunta: ¿Cómo puedo eliminar un estilo agregado con la función .css ()?

pregunta creada en Thu, Jan 25, 2018 12:00 AM

Estoy cambiando CSS con jQuery y deseo eliminar el estilo que estoy agregando en función del valor de entrada:

 
if(color != '000000') $("body").css("background-color", color); else // remove style ?

¿Cómo puedo hacer esto? Tenga en cuenta que la línea anterior se ejecuta cada vez que se selecciona un color con un selector de color (es decir, cuando el mouse se mueve sobre una rueda de color).

Segunda nota: no puedo hacer esto con css("background-color", "none") porque eliminará el estilo predeterminado de los archivos css. Solo quiero eliminar el estilo en línea background-color agregado por jQuery.

    
816
  1. 2016-03-29 23: 28: 18Z
  2. mejor intente addClass /removeClass basado en su fcuntionality. Esto no afectará a otros estilos.
    2017-07-26 13: 12: 48Z
18 Respuestas                              18                         

El cambio de la propiedad a una cadena vacía aparece para hacer el trabajo:

 
$.css("background-color", "");
    
1260
2019-06-18 13: 35: 38Z
  1. no funciona en IE 6-8
    2013-03-26 11: 34: 10Z
  2. ¿A quién le importa el IE 6-8? IE 6-8 es un infierno para el que se puede desarrollar, por lo que puede considerarlo obsoleto. Si los usuarios siguen utilizando IE 6-8, ¡déjalos sufrir!
    2014-01-15 19: 21: 01Z
  3. @ SlavikMe Trabajo en una compañía Fortune 500, e IE8 sigue siendo el estándar, incluso en Windows 7. theie8countdown.com 10% en todo el mundo sigue siendo una cantidad considerable de usuarios.
    2014-01-16 16: 56: 32Z
  4. @ janko-m, no estoy recomendando el uso de navegadores antiguos, pero el consenso general aquí es que si todos decimos que vamos a dejar de apoyar el IE antiguo , luego, estas grandes corporaciones eliminarán todo para actualizar los cientos de miles de sistemas y sitios de intranet que tienen actualmente. Yo, y muchos otros, no estamos haciendo este trabajo como un favor; estamos contratados para hacer un trabajo, y ese trabajo es hacer que las cosas funcionen en IE8 independientemente del tiempo de desarrollo adicional. En un mercado libre, tenemos la oportunidad de elegir entre desarrollar únicamente para los navegadores que nos gustan o tener un trabajo. Tomaré los cheques de pago.
    2014-03-31 15: 52: 03Z
  5. Tengo que estar del lado de @baacke aquí. Nuestro cliente todavía tiene un requisito mínimo oficial de IE6 (!!). El problema es que sus clientes están en todo el mundo, incluidos los países menos desarrollados. Los "clientes del cliente" pueden estar utilizando computadoras muy antiguas para hacer negocios con nuestro cliente. Por lo tanto, el navegador antiguo debe ser al menos mínimamente admitido o corren el riesgo de perder negocios ...
    2014-06-27 09: 59: 20Z

La respuesta aceptada funciona pero deja un atributo style vacío en el DOM en mis pruebas. No es gran cosa, pero esto lo elimina todo:

 
removeAttr( 'style' );

Esto supone que desea eliminar todo el estilo dinámico y volver al estilo de la hoja de estilo.

    
520
2017-05-23 12: 02: 48Z
  1. Esta es una buena idea bPara obtener más información sobre jQuery, consulte el error enviado: bugs.jquery.com/ticket/9500
    2012-09-12 19: 08: 50Z
  2. @ Tosh Ese error se resolvió el 25/08/2011: bugs.jquery.com/…
    2012-09-12 21: 30: 28Z
  3. Lo sé, pero al menos en la versión 1.7 todavía tiene errores, no he probado 1.8
    2012-09-12 21: 37: 02Z
  4. Esto también eliminará todas las demás propiedades en el atributo de estilo. Así que elige sabiamente.
    2014-07-10 01: 58: 59Z
  5. ¡Esto es inteligente! la respuesta aceptada no funcionaría en situaciones donde el estilo en línea creado por jquery debería sobrescribir los estilos css, pero este método funciona bien en todas las situaciones.
    2016-06-20 07: 59: 17Z

Hay varias formas de eliminar una propiedad CSS utilizando jQuery:

1. Establecer la propiedad CSS en su valor predeterminado (inicial)

 
.css("background-color", "transparent")

Consulte el valor inicial para la propiedad CSS en MDN . Aquí el valor predeterminado es transparent. También puede usar inherit para varias propiedades de CSS para heredar el atributo de su padre. En CSS3 /CSS4, también puede usar initial , revert o unset pero estas palabras clave pueden tener un soporte de navegador limitado.

2. Eliminando la propiedad CSS

Una cadena vacía elimina la propiedad CSS, es decir,

 
.css("background-color","")

Pero tenga cuidado, como se especifica en jQuery .css () documentación , esto elimina la propiedad pero tiene problemas de compatibilidad. con IE8 para ciertas propiedades abreviadas de CSS, incluido background .

  

Establecer el valor de una propiedad de estilo en una cadena vacía, por ejemplo,   $('# mydiv'). css ('color', '') - elimina esa propiedad de un elemento   si ya se ha aplicado directamente, ya sea en el estilo HTML   atributo, a través del método .css () de jQuery, o mediante DOM directo   Manipulación de la propiedad de estilo. Sin embargo, no elimina un   estilo que se ha aplicado con una regla CSS en una hoja de estilo o   elemento. Advertencia: una excepción notable es que, para IE 8 y anteriores,   la eliminación de una propiedad de taquigrafía como el borde o el fondo   elimina ese estilo por completo del elemento, independientemente de lo que se haya establecido   en una hoja de estilo o elemento .

3. Eliminar todo el estilo del elemento

 
.removeAttr("style")
    
166
2016-01-23 17: 52: 29Z

Tengo la forma de eliminar un atributo de estilo con JavaScript puro solo para hacerte saber la forma de JavaScript puro

 
var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
    
47
2016-11-28 22: 33: 35Z
  1. El tipo ya usa jQuery ... ¿por qué molestarse en volver a implementar un método de navegador cruzado????
    2012-06-04 14: 44: 15Z
  2. porque jquery no es todo, porque ella o quizás debería decir que cada uno de nosotros como desarrolladores deberíamos saber qué significa la compatibilidad y cómo hacer esas cosas con Core lenguajes como JavaScript, quizás esta es mi teoría. Ya creé mi propio marco a partir de mi conocimiento de JavaScript central. Me niego a usar otras cosas. Tengo mi propio concepto y mi forma de pensar :) y, por cierto.gracias por tu (-) solo necesitaba ser un valor agregado :) y también por la forma en que el chico no es un chico al que ella llama Alex
    2012-06-13 14: 22: 09Z
  3. Solo quiero tener en cuenta que no debería revisar document.all si no lo usa. Quizás deberías verificarlo así: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } else if (elm.style.removeAttribute) {elm.style.removeAttribute (attributeName); }
    2013-04-03 10: 51: 25Z
  4. bueno, tienes razón, debería ser así si (navigator.appName == "Microsoft Internet Explorer") document.body.style.removeAttribute ('background-color' ); else document.body.style.removeProperty ('background-color'); y por otro lado, su solución también es correcta :) gracias por su nota
    2013-04-06 07: 25: 10Z
  5. No, definitivamente debería verificar si esa función existe en lugar de verificar el navegador. ¿Qué sucede si MS decide cambiar el nombre de la función en la próxima versión de IE? ¿Entonces vas y verificas la versión de IE también?
    2013-04-10 04: 11: 03Z

Esto eliminará la etiqueta completa:

 
  $("body").removeAttr("style");
    
18
2016-12-01 16: 11: 22Z
  1. Es una solución aproximada y no funcionaría siempre porque elimina el estilo del elemento completo
    2017-08-16 08: 33: 14Z
  2. Eso es una solución directa.
    2019-04-23 22: 40: 33Z

cualquiera de estas funciones jQuery debería funcionar:

 
$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
    
17
2013-08-28 14: 37: 24Z
  1. Para eliminar solo una propiedad css: var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
    2013-10-06 19: 51: 26Z
  2. igaar: su solución es la más ingeniosa. Lo puse en un bucle '.each' para un montón de celdas de tabla que tenían "mostrar: ninguna" que tenía que ir pero con otras propiedades que tenían que permanecer. Funcionó a la perfección, simplemente quitando la pantalla: ninguno y dejando el resto.
    2014-02-19 05: 16: 14Z
  3. La segunda línea no funciona si se agrega por .css ();
    2015-03-12 12: 37: 58Z

¿Qué tal algo como:

 
var myCss = $(element).attr('css');
myCss = myCss.replace('background-color: '+$(element).css('background-color')+';', '');
if(myCss == '') {
  $(element).removeAttr('css');
} else {
  $(element).attr('css', myCss);
}
    
6
2012-11-27 16: 11: 19Z
  1. ¡Me gusta este! Quitas la propiedad especificada y nada más.
    2015-07-09 10: 46: 30Z

Prueba esto:

 
$('#divID').css({"background":"none"});// remove existing

$('#divID').css({"background":"#bada55"});// add new color here.

Gracias

    
6
2014-03-01 05: 40: 16Z
  1. El único problema con su "eliminar existente" es quetambién anulará el fondo de la hoja de estilo si hay un conjunto.
    2018-03-08 16: 20: 43Z

Sólo uso:

 
$('.tag-class').removeAttr('style');

o

 
$('#tag-id').removeAttr('style');
    
6
2016-12-01 16: 09: 37Z
  1. Esto también eliminará otros estilos agregados en línea, no solo el color.
    2017-02-21 06: 45: 09Z

Si usa el estilo CSS, puede usar:

 
$("#element").css("background-color","none"); 

y luego reemplazar con:

 
$("#element").css("background-color", color);

Si no usa el estilo CSS y tiene un atributo en el elemento HTML, puede usar:

 
$("#element").attr("style.background-color",color);
    
5
2013-05-21 15: 20: 13Z

Usar mi complemento:

 
$.fn.removeCss=function(all){
        if(all===true){
            $(this).removeAttr('class');
        }
        return $(this).removeAttr('style')
    }

Para su caso, utilícelo de la siguiente manera:

 
$(<mySelector>).removeCss();

o

 
$(<mySelector>).removeCss(false);

si desea eliminar también CSS definido en sus clases:

 
$(<mySelector>).removeCss(true);
    
5
2013-05-24 06: 47: 16Z
  1. $(this).removeAttr es redundante y this.removeAttr debería ser suficiente.
    2016-11-28 22: 07: 58Z
  2. ¿removeAttr eliminará también class attr? no lo creo
    2016-11-29 10: 25: 24Z
  3. Estoy hablando del removeAttr dentro de tu plugin, donde this ya es un elemento jQuery. $(this) es redundante.
    2016-11-29 14: 08: 03Z
  4. AH! OK OK .. @EmileBergeron, el antiguo jquery proporciona this como HTMLElement instancia asignada al elemento jQuery ... Como ves, mi respuesta es antigua ... por eso ... de todos modos, puedo decirte por qué cambian eso, hacer eso debido a la función de flecha que viene en ES6. .. y this se vuelve inútil y fue reemplazado por event.currentTarget
    2016-11-29 16: 22: 19Z
  5. ¡Muy bien! ;) Es curioso cómo 3 años son viejos en el mundo JS.
    2016-11-29 16: 37: 44Z

2018

hay una API nativa para eso

 
element.style.removeProperty(propery)
    
2
2018-12-24 08: 00: 22Z

¡Este también funciona!

 
$elem.attr('style','');
    
1
2014-12-11 16: 32: 03Z

¿Por qué no hacer el estilo que desea eliminar una clase CSS? Ahora puedes usar: .removeClass(). Esto también abre la posibilidad de usar: .toggleClass()

(elimine la clase si está presente y agréguela si no está).

Agregar /eliminar una clase también es menos confuso para cambiar /solucionar problemas cuando se trata de problemas de diseño (en lugar de tratar de averiguar por qué desapareció un estilo en particular).

    
1
2017-09-16 14: 33: 14Z
 
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))
    
1
2018-11-01 12: 46: 18Z

Esto es más complejo que algunas otras soluciones, pero puede ofrecer más flexibilidad en los escenarios:

1) Cree una definición de clase para aislar (encapsular) el estilo que desea aplicar /eliminar de forma selectiva. Puede estar vacío (y en este caso, probablemente debería estar):

 
.myColor {}

2) use este código, basado en http://jsfiddle.net/kdp5V/167/ de esta respuesta por gilly3 :

 
function changeCSSRule(styleSelector,property,value) {
    for (var ssIdx = 0; ssIdx < document.styleSheets.length; ssIdx++) {
        var ss = document.styleSheets[ssIdx];
        var rules = ss.cssRules || ss.rules;
        if(rules){
            for (var ruleIdx = 0; ruleIdx < rules.length; ruleIdx++) {
                var rule = rules[ruleIdx];
                if (rule.selectorText == styleSelector) {
                    if(typeof value == 'undefined' || !value){
                        rule.style.removeProperty(property);
                    } else {
                        rule.style.setProperty(property,value);
                    }
                    return; // stops at FIRST occurrence of this styleSelector
                }
            }
        }
    }
}

Ejemplo de uso: http://jsfiddle.net/qvkwhtow/

Advertencias:

  • No probado extensivamente.
  • No se puede incluir ! important u otras directivas en el nuevo valor. Cualquiera de estas directivas existentes se perderá a través de esta manipulación.
  • Solo los cambios que se encuentran por primera vez en un styleSelector No agrega ni quita estilos completos, pero esto podría hacerse con algo más detallado.
  • Cualquier valor no válido /inutilizable se ignorará o generará un error.
  • En Chrome (al menos), las reglas CSS no locales (como en sitios cruzados) no están expuestas a través del objeto document.styleSheets, por lo que esto no funcionará en ellas. Uno tendría que agregar una anulación local y manipular eso, teniendo en cuenta el comportamiento "primero encontrado" de este código.
  • document.styleSheets no es particularmente fácil de manipular en general, no espere que esto funcione para un uso agresivo.

Aislar el estilo de esta manera es de lo que se trata CSS, incluso si no lo es manipularlo. La manipulación de las reglas CSS NO es de lo que se trata jQuery, jQuery manipula los elementos DOM y utiliza los selectores CSS para hacerlo.

    
0
2017-05-23 12: 18: 29Z

Simple es barato en desarrollo web. Recomiendo usar una cadena vacía al eliminar un estilo en particular

 
$(element).style.attr = '  ';
    
0
2015-09-17 09: 39: 30Z

Prueba esto

 
$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');
    
0
2016-08-24 06: 05: 54Z
fuente colocada aquí