una - llamar hoja de estilo desde javascript




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

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.


¡Este también funciona!

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

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


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

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


Esto eliminará la etiqueta completa:

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

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")

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

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

Prueba esto:

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

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

Gracias


Sólo usando:

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

o

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

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');

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

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.


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

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






css