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

926

Estoy cambiando CSS con jQuery y deseo eliminar el estilo que estoy agregando según el valor de entrada:

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

How can I do this?
Note that the line above runs whenever a color is selected using a color picker (ie. when the mouse moves over a color wheel).

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

3
1400

Cambiar la propiedad a una cadena vacía parece hacer el trabajo:

$.css("background-color", "");
14
  • 5
    @baacke Es una pena cuando el supuesto "estándar" está terriblemente desactualizado y desperdicia mucho tiempo de desarrollo. Siento poca simpatía por las corporaciones que eligen usar software obsoleto, no veo por qué debería dedicar más tiempo a desarrollar para ellas. andrewb 18/02/2014 a las 6:01
  • 34
    Tengo que ponerme 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 usando computadoras muy antiguas para hacer negocios con nuestro cliente. Por lo tanto, el navegador antiguo debe tener al menos un soporte mínimo o corren el riesgo de perder negocios ...user1429080 27/06/2014 a las 9:59
  • 10
    Ustedes no pueden establecer los requisitos de ninguna solución que desarrollen para un cliente. Si ese cliente quiere o necesita soporte para un navegador más antiguo, es su trabajo proporcionárselo, punto. Ustedes, hablando de "a quién le importa", le dan mala fama a los verdaderos ingenieros. Ed DeGagne 29/12/14 a las 14:49
  • 5
    @EdDeGagne: constantemente debe dejar de admitir versiones anteriores de IE. Esto mejora su base de código y motiva a los visitantes a no usar un IE antiguo. Lo único difícil es averiguar cuándo se puede dejar el soporte. Los sitios web de Google, que tienen muchos visitantes, si decidieron eliminar un IE antiguo, pueden confiar en que fue una buena decisión. Una empresa incluso llegó a decirles a sus usuarios que les compensa más comprarle a cada antiguo usuario de IE una computadora moderna que mantener su código de IE (que es exactamente lo que ofrecían). janko-m 29/12/14 a las 16:41
  • 7
    Dejé de leer cuando vi "IE8 sigue siendo el estándar, incluso en Windows 7"Capsule 11/07/2016 a las 2:41
563

La respuesta aceptada funciona pero deja un styleatributo 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.

7
  • 4
    @Tosh Ese error se resolvió el 25/8/2011: bugs.jquery.com/…ThinkingStiff 12/09/12 a las 21:30
  • Lo sé, pero al menos en la versión 1.7 todavía tiene errores, no he probado 1.8Tosh 12/09/12 a las 21:37
  • Probé esta solución en IE7 (a través del modo de navegador de herramientas de desarrollo de IE) con JQuery 1.10.2 y funcionó a la perfección. user1106551 17 de marzo de 2014 a las 14:03
  • 8
    Esto también eliminará todas las demás propiedades del atributo de estilo. Así que elige sabiamente. codingrhythm 10 de julio de 2014 a las 1:58
  • 1
    ¡Esto es inteligente! la respuesta aceptada no funcionaría en situaciones en las que el estilo en línea creado por jquery debería sobrescribir los estilos CSS, pero este método funciona bien en todas las situaciones. Farzad Yousefzadeh 20 de junio de 2016 a las 7:59
178

Hay varias formas de eliminar una propiedad CSS usando jQuery:

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

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

Vea el valor inicial de la propiedad CSS en MDN . Aquí el valor predeterminado es transparent. También puede utilizar inheritvarias propiedades CSS para heredar el atributo de su padre. En CSS3 / CSS4, también puede usar o initial, pero estas palabras clave pueden tener una compatibilidad limitada con el navegador.revertunset

2. Eliminar la propiedad CSS

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

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

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

Setting the value of a style property to an empty string — e.g. $('#mydiv').css('color', '') — removes that property from an element if it has already been directly applied, whether in the HTML style attribute, through jQuery's .css() method, or through direct DOM manipulation of the style property. It does not, however, remove a style that has been applied with a CSS rule in a stylesheet or element. Warning: one notable exception is that, for IE 8 and below, removing a shorthand property such as border or background will remove that style entirely from the element, regardless of what is set in a stylesheet or element.

3. Eliminar todo el estilo del elemento

.removeAttr("style")
0
53

Conseguí la manera de eliminar un atributo de estilo con JavaScript puro solo para que conozcas el camino del JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
7
  • 13
    El tipo ya usa jQuery ... ¡¿por qué molestarse en volver a implementar un método de navegador cruzado?!? billy 4/06/12 a las 14:44
  • 35
    porque jquery no lo es todo, porque ella o quizás yo debería decir que cada uno de nosotros como desarrolladores debería saber qué significa compatibilidad y cómo hacer algo así con lenguajes centrales como JavaScript, quizás esta es mi teoría, ya creé mi propio marco desde mi conocimiento del núcleo de JavaScript, 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 cierto, el chico no es un chico, ella es una llamada AlexMarwan 13/06/12 a las 14:22
  • 1
    Solo quiero señalar que no debe verificar document.all si no lo usa. Quizás deba comprobarlo así: if (elm.style.removeProperty) {elm.style.removeProperty (propertyName); } else if (elm.style.removeAttribute) {elm.style.removeAttribute (atributoName); }Richard 3 de abril de 2013 a las 10:51
  • 10
    No, definitivamente debería verificar si esa función existe en lugar de buscar el navegador. ¿Qué pasa si MS decide cambiar el nombre de la función en la próxima versión de IE? ¿Luego vas y compruebas la versión de IE también? j03w 10 de abril de 2013 a las 4:11
  • 1
    Aunque siempre es importante comprender el lenguaje central de cualquier biblioteca que uses, también diría que nunca debes reinventar la rueda. Solo mi opinión;)Jacob Morris 2 de junio de 2017 a las 15:08
25

Esto eliminará la etiqueta completa:

  $("body").removeAttr("style");
2
  • 1
    Es una solución aproximada y no siempre funcionaría porque elimina el estilo del elemento completoKonstantin Zadiran 16 de agosto de 2017 a las 8:33
  • Según el nombre del método, elimina una etiquetaattribute , no una . connexo 7 de abril a las 11:37
19

cualquiera de estas funciones de jQuery debería funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
2
  • 23
    Para eliminar solo una propiedad css:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');ilgaar 6 oct 2013 a las 19:51
  • igaar: su solución es la más ordenada. Lo puse en un bucle '.each' para un montón de celdas de tabla que tenían "display: none" que tenía que desaparecer pero con otras propiedades que tenían que permanecer. Funcionó a la perfección, simplemente quitando la pantalla: ninguna y dejando el resto. Rob Von Nesselrode 19 de febrero de 2014 a las 5:16
11

Solo usando:

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

o

$('#tag-id').removeAttr('style');
1
  • Esto también eliminará otros estilos agregados en línea, no solo el color. LongInt 21/02/2017 a las 6:45
7

¿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);
}
1
  • ¡Me gusta este! Elimina la propiedad especificada y nada más. Joel 9 de julio de 2015 a las 10:46
7

Si usa el estilo CSS, puede usar:

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

y luego reemplace 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);
7

Usa 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
  • $(this).removeAttres redundante y this.removeAttrdebería ser suficiente. Emile Bergeron 28/11/2016 a las 22:07
  • ¿Se removeAttr eliminará también el classatributo? no lo creoAbdennour TOUMI 29/11/2016 a las 10:25
  • Estoy hablando del removeAttrinterior de su complemento, donde thisya hay un elemento jQuery. $(this)es redundante. Emile Bergeron 29/11/2016 a las 14:08
  • 2
    ¡AH! OK OK .. @EmileBergeron, el viejo jQuery ofrece thiscomo HTMLElementejemplo asignada al elemento de jQuery ... Como se puede ver, mi respuesta es viejo ... Es por eso .. de todos modos, lo que puedo decir u por qué cambian de eso, lo hacen debido a la función de flecha que es nueva en ES6. .. y se thisvuelve inútil y fue reemplazado porevent.currentTargetAbdennour TOUMI 29/11/2016 a las 16:22
  • 1
    ¡Lo suficientemente justo! ;) Es curioso cómo son 3 años en el mundo JS. Emile Bergeron 29/11/2016 a las 16:37
7

Prueba esto:

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

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

Gracias

1
  • El único problema con su "eliminar existente" es que también anulará el fondo de la hoja de estilo si hay un conjunto. Jtbs 8 de marzo de 2018 a las 16:20
6

2018

hay una API nativa para eso

element.style.removeProperty(propery)
4

¡Este también funciona!

$elem.attr('style','');
3

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

(elimine la clase si está presente y agréguela si no lo 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).

2
let el = document.querySelector(element)
let styles = el.getAttribute('style')

el.setAttribute('style', styles.replace('width: 100%', ''))
1

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

1) Haga 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 estarlo):

.myColor {}

2) use este código, basado en http://jsfiddle.net/kdp5V/167/ de esta respuesta de 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 ampliamente probado.
  • No se pueden incluir directivas ! Important u otras en el nuevo valor. Cualquiera de estas directivas existentes se perderá debido a esta manipulación.
  • Solo los cambios encontraron la primera aparición de un styleSelector. No agrega ni elimina estilos completos, pero esto podría hacerse con algo más elaborado.
  • Cualquier valor inválido / inutilizable será ignorado o arrojará un error.
  • En Chrome (al menos), las reglas CSS no locales (como en sitios cruzados) no se exponen 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 de "primer encontrado" de este código.
  • document.styleSheets no es particularmente amigable con la manipulación 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 manipularlo no lo es. La manipulación de reglas CSS NO es de lo que se trata jQuery, jQuery manipula elementos DOM y usa selectores CSS para hacerlo.

1

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

$(element).style.attr = '  ';
1

Prueba esto

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');
1

quitas el estilo usando

removeAttr( 'style' );

0

Puedes usar:

 $("#eslimi").removeAttr("style").hide();
0

Tratar

document.body.style=''

$("body").css("background-color", 'red');

function clean() {
  document.body.style=''
}
body { background-color: yellow; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="clean()">Remove style</button>