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

eliminar elementos de un div jquery

Question

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 de background-color agregado por jQuery.

Answer 1

¡Este también funciona!

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

Answer 2

¿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 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).

Answer 3

¿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);
}

Answer 4

Cambiar la propiedad a una cadena vacía aparece para hacer el trabajo.

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

Answer 5

Esto eliminará la etiqueta completa:

  $("body").removeAttr("style");

Answer 6

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) Utilice 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 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 los cambios que se encuentran por primera vez aparecen en un styleSelector. No agrega ni elimina estilos completos, pero esto podría hacerse con algo más detallado.
• 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 "primero 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 no lo es manipularlo. Manipular las reglas de CSS NO es de lo que se trata jQuery, jQuery manipula los elementos DOM y usa los selectores de CSS para hacerlo.

Answer 7

Hay varias formas de eliminar una propiedad CSS utilizando jQuery:

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

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

Ver el valor inicial de la propiedad CSS en MDN . Aquí el valor predeterminado es transparent . También puede usar inherit para varias propiedades 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 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, mediante el método .css () de jQuery, o mediante la manipulación directa de DOM de la propiedad de estilo. Sin embargo, no elimina un estilo que se ha aplicado con una regla de 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 abreviada como el borde o el fondo eliminará ese estilo por completo del elemento, independientemente de lo que esté establecido en una hoja de estilo o elemento .

3. Eliminando todo el estilo del elemento.

.removeAttr("style")

Answer 8

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

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

Answer 9

Prueba esto

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

Answer 10

Prueba esto:

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

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

Gracias

Answer 11

Sólo usando:

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

o

$(''#tag-id'').removeAttr(''style'');

Answer 12

Si usas estilo CSS, puedes 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);

Answer 13

Tengo la forma de eliminar un atributo de estilo con JavaScript puro solo para que sepa el modo de JavaScript puro

var bodyStyle = document.body.style;
if (bodyStyle.removeAttribute)
    bodyStyle.removeAttribute(''background-color'');
else        
    bodyStyle.removeProperty(''background-color'');

Answer 14

Usa mi Plugin:

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

Para su caso, utilícelo como sigue:

$(<mySelector>).removeCss();

o

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

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

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

Answer 15

cualquiera de estas funciones jQuery debería funcionar:

$("#element").removeAttr("style");
$("#element").removeAttr("background-color") 

Answer 16

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

Answer 17

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

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