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

868

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 de arriba se ejecuta cada vez que se selecciona un color usando un selector de color (es decir, cuando el mouse se mueve sobre una rueda de colores).

Segunda nota: no puedo hacer esto 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 .

Alex
fuente
mejor intente addClass / removeClass en función de su funcionalidad. Esto no afectará a otros estilos.
Prabhakaran

Respuestas:

1333

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

$.css("background-color", "");
doble pitido
fuente
44
@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 desarrollarlas.
andrewb
33
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 usando computadoras muy antiguas para hacer negocios con nuestro cliente. Por lo tanto, el navegador antiguo debe ser al menos mínimamente compatible o corren el riesgo de perder negocios ...
user1429080
8
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 antiguo, es su trabajo proporcionarlo, punto. Ustedes, hablando de "a quién le importa", dan un mal nombre a los verdaderos ingenieros.
Ed DeGagne
55
@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 puede dejar de recibir soporte. Los sitios web de Google, que tienen muchos visitantes, si decidieron abandonar un IE antiguo, pueden confiar en que fue una buena decisión. Una compañía incluso llegó a decirles a sus usuarios que les vale más la pena comprar una computadora moderna a cada antiguo usuario de IE que mantener su código de IE (que es exactamente lo que ofrecieron).
Janko-m
55
Dejé de leer cuando vi "IE8 sigue siendo el estándar, incluso en Windows 7"
Cápsula
544

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.

Rigidez
fuente
Esta es una buena idea, pero con errores en jQuery, vea el error enviado: bugs.jquery.com/ticket/9500
Tosh
44
@Tosh Ese error se resolvió 25/08/2011: bugs.jquery.com/…
ThinkingStiff
Lo sé, pero al menos en la versión 1.7 todavía tiene errores, no he probado 1.8
Tosh
77
Esto eliminará todas las demás propiedades en el atributo de estilo también. Así que elige sabiamente.
codingrhythm
1
Esto es inteligente! la respuesta aceptada no funcionaría en situaciones donde el estilo en línea realizado por jquery debería sobrescribir los estilos css, pero este método funciona bien en todas las situaciones.
Farzad YZ
170

Hay varias formas de eliminar una propiedad CSS usando jQuery:

1. Establecer la propiedad CSS en 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 usar inheritvarias propiedades CSS para heredar el atributo de su padre. En CSS3 / CSS4, también puede usar initial, reverto unsetestas palabras clave pueden tener compatibilidad limitada con el navegador.

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 .

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 la manipulación directa del DOM 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 versiones posteriores, eliminar una propiedad abreviada como borde o fondo eliminará ese estilo por completo del elemento, independientemente de lo que esté configurado en una hoja de estilo o elemento .

3. Eliminar todo el estilo del elemento

.removeAttr("style")
KrisWebDev
fuente
49

Obtuve la forma de eliminar un atributo de estilo con JavaScript puro solo para hacerle saber la forma de JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute('background-color');
else        
    bodyStyle.removeProperty('background-color');
Marwan
fuente
11
El tipo ya usa jQuery ... ¿por qué molestarse en volver a implementar un método de navegador cruzado?
Billy
32
porque jquery no es todo, porque ella o tal vez debería decir que cada uno de nosotros como desarrolladores debería saber qué significa la compatibilidad y cómo hacer esas cosas con lenguajes centrales como JavaScript, tal vez esta es mi teoría, ya creé mi propio marco desde 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 su (-) solo necesitaba ser un valor agregado :) y también por cierto no es un chico, es un nombre de Alex
Marwan
1
Solo quiero señalar que no debe verificar 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); }
Richard
bueno, tiene 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
Marwan
99
No, definitivamente debe verificar si esa función existe en lugar de verificar el navegador. ¿Qué pasa si MS decide cambiar el nombre de la función en la próxima versión de IE? ¿Entonces vas y compruebas la versión de IE también?
j03w
24

Esto eliminará la etiqueta completa:

  $("body").removeAttr("style");
SURJEET SINGH Bisht
fuente
Es una solución aproximada y no funcionaría siempre porque elimina el estilo completo del elemento
Konstantin Zadiran
19

cualquiera de estas funciones jQuery debería funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 
Mahesh Gaikwad
fuente
22
Para eliminar solo una propiedad css:var cssObject = $('selector').prop('style'); cssObject.removeProperty('background-color');
ilgaar
igaar: su solución es la más perfecta. Lo puse en un ciclo '.each' para un montón de celdas de tabla que tenían "display: none" que tenía que ir pero con otras propiedades que tenían que permanecer. Funcionó sin problemas, simplemente quitando la pantalla: ninguno y dejando el resto.
Rob Von Nesselrode
9

Solo usando:

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

o

$('#tag-id').removeAttr('style');
Alberto Cerqueira
fuente
Esto también eliminará otros estilos agregados en línea, no solo el color.
LongInt
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);
}
nclu
fuente
¡Me gusta este! Elimina la propiedad especificada y nada más.
Joel
7

Usa mi plugin:

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

Para su caso, úselo de la siguiente manera:

$(<mySelector>).removeCss();

o

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

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

$(<mySelector>).removeCss(true);
Abdennour TOUMI
fuente
$(this).removeAttres redundante y this.removeAttrdebería ser suficiente.
Emile Bergeron
¿ removeAttr Eliminará también classattr? no lo creo
Abdennour TOUMI
Estoy hablando del removeAttrinterior de su complemento, donde thisya hay un elemento jQuery. $(this)es redundante
Emile Bergeron
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 viene nueva en ES6. .. y se thisvuelve inútil y fue reemplazado porevent.currentTarget
Abdennour TOUMI
1
¡Lo suficientemente justo! ;) Es curioso cómo 3 años tiene JS en el mundo.
Emile Bergeron
7

Prueba esto:

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

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

Gracias

uihelp
fuente
El único problema con su "eliminar existente" es que también anulará el fondo de la hoja de estilo si hay un conjunto.
Jtbs
6

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);
Luis
fuente
6

2018

hay una API nativa para eso

element.style.removeProperty(propery)
pery mimon
fuente
2

¡Este también funciona!

$elem.attr('style','');
dazzafact
fuente
2

¿Por qué no hacer el estilo que desea eliminar una clase CSS? Ahora se puede utilizar: .removeClass(). Esto también abre la posibilidad de usar:.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 descubrir por qué desapareció un estilo en particular).

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

el.setAttribute('style', styles.replace('width: 100%', ''))
Océano de Kamil
fuente
1

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

1) Haga una definición de clase para aislar (encapsular) el estilo que desea aplicar / eliminar selectivamente. Puede estar vacío (y para 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 importantes u otras en el nuevo valor. Cualquiera de estas directivas existentes se perderá a través de esta manipulación.
  • Solo cambia la primera aparición encontrada de un styleSelector. No agrega o elimina estilos enteros, pero esto podría hacerse con algo más elaborado.
  • Cualquier valor no vá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 "primero encontrado" de este código.
  • document.styleSheets no es particularmente amigable con la manipulación en general, no esperes 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 utiliza selectores CSS para hacerlo.

dkloke
fuente
1

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

$(element).style.attr = '  ';
Victor Michael
fuente
1

Prueba esto

$(".ClassName").css('color','');
Or 
$("#Idname").css('color','');
Reglas Basant
fuente