¿Cómo eliminar la propiedad CSS usando JavaScript?

195

¿Es posible eliminar una propiedad CSS de un elemento usando JavaScript? Por ejemplo div.style.zoom = 1.2, ahora quiero eliminar la propiedad de zoom a través de JavaScript.

javascript  css 
— se sentó
fuente
3
Por favor aclare: ¿está tratando de eliminar una clase de algún elemento o un atributo de algún elemento?
— Jan Hančič
1
Perdón por eso, no una clase, atributo de un elemento.
— sab
¿Por qué rechazar? es una pregunta bastante decente no?
— Roland Bouman
2
Hola, sentado, no entiendo, ¿por qué marcaste la respuesta de los naivistas como "respuesta aceptada"? Quiero decir, su solución es buena en caso de que desee encontrar elementos por clase, pero todo en su pregunta indica que estaba buscando un método para cambiar el efecto de establecer una propiedad del estilo local. ¿Seguramente, mi respuesta se ajusta mejor al problema? ¿Quizás he entendido mal tu pregunta?
— Roland Bouman el
1
@RolandBouman, en realidad, la respuesta aceptada debe cambiarse para que sea la de Edvinas Ilčenko porque aborda lo que se preguntó sobre la eliminación en lugar de cambiar a la predeterminada. Su respuesta aún tiene valor, así que la he editado para aclarar la distinción.
— Whitneyland

Respuestas:

187

Tienes dos opciones:

OPCIÓN 1:

Puede usar el método removeProperty . Eliminará un estilo de un elemento.

el.style.removeProperty('zoom');

OPCION 2:

Puede establecerlo en el valor predeterminado:

el.style.zoom = "";

El zoom efectivo ahora será lo que sigue de las definiciones establecidas en las hojas de estilo (a través de enlaces y etiquetas de estilo). Entonces, esta sintaxis solo modificará el estilo local de este elemento.

— Roland Bouman
fuente
... junto con CSS del usuario y los estilos predeterminados del navegador.
— Quentin
Entendí que el OP significaba que querían hacerlo como si no hubieran establecido la propiedad de estilo del elemento, que es exactamente lo que ha proporcionado. Intenté usar el.style.removeProperty ('zoom'); (o 'llenar', en realidad, en mi caso) que parece hacer lo mismo en IE, y que otros navegadores lo ignoran. Por alguna razón, me sorprendió descubrir que establecerlo en una cadena en blanco tiene el mismo efecto y parece funcionar en todos (las versiones recientes de) los navegadores.
— Shavais
¿Se especifica este comportamiento en alguna parte de un estándar? No puedo encontrarlo :-(
— Oliver Joseph Ash
@OliverJosephAsh sí, está documentado, vea esta respuesta a continuación stackoverflow.com/a/7901886/700206
— whitneyland
10

Puede usar el objeto styleSheets:

document.styleSheets[0].cssRules[0].style.removeProperty("zoom");

Advertencia # 1: debe conocer el índice de su hoja de estilo y el índice de su regla.

Advertencia # 2: los navegadores implementan este objeto de manera inconsistente; lo que funciona en uno puede no funcionar en los demás.

— james.garriss
fuente
Esto parece realmente frágil. ¿No se romperá cada vez que cambien sus índices?
— Casey Rodarmor el
Sí. Eso es exactamente lo que dice la advertencia # 1.
— james.garriss
Mi Chrome 26 no tiene CSSStyleRule.prototype.removeProperty= (De hecho CSSStyleRule, no tiene ningún método. = (
— Rudie
CSSStyleSheet.prototype.removeRuleal rescate.
— Rudie
@ Rudie, ¿no CSSStyleSheet.prototype.deleteRule?
— roka
7 
element.style.height = null;

salida:

<div style="height:100px;"> 
// results: 
<div style="">
— T.Todua
fuente
Parece que establecer el estilo en nulo no funciona en IE11.
— MaximeW
1
¿Por qué alguien debería preocuparse por los IEnavegadores? Los ignoro intencionalmente por años.
— T.Todua
4

Puede intentar encontrar todos los elementos que tengan esta clase y establecer la propiedad "zoom" en "nada".

Si está utilizando la biblioteca jQuery javascript, puede hacerlo con $(".the_required_class").css("zoom","")

Editar: se eliminó esta afirmación porque resultó no ser cierta, como se señaló en un comentario y otras respuestas, de hecho, ha sido posible desde 2010.

Falso: no existe una forma generalmente conocida de modificar las hojas de estilo desde JavaScript.

— naivistas
fuente
55
Sí hay. Modificar las hojas de estilo mediante programación, aunque JavaScript no es difícil. Funciona en varios navegadores con un gran rendimiento y realmente tiene sentido cuando se cambia una propiedad que debería ser la misma en un conjunto de elementos. Como fue el caso en enero de 2010 también. Aquí hay un breve ejemplo: stackoverflow.com/questions/14927706/…
— Clox
Clox: ¡Agregar hojas de estilo que anulan algunas propiedades mediante programación - por supuesto! Modificando los que ya están cargados - No he oído hablar de eso.
— naivistas
¿Está destinado a ser css () en lugar de attr (). ¿O tal vez es attr () en IE?
— Alex KeySmith
en realidad debería ser css, no attr, tienes razón.
— naivistas
0

Esto debería ser el truco: establecer el estilo en línea en normal para el zoom:

$ ('div'). attr ("estilo", "zoom: normal;");

— Mate
fuente
1
La pregunta era cómo eliminar un estilo, esta respuesta destruirá todos los estilos existentes y los reemplazará con una nueva entrada.
— whitneyland el
0

en realidad, si ya conoces la propiedad, esto lo hará ...

por ejemplo:

<a href="test.html" style="color:white;zoom:1.2" id="MyLink"></a>

    var txt = "";
    txt = getStyle(InterTabLink);
    setStyle(InterTabLink, txt.replace("zoom\:1\.2\;","");

    function setStyle(element, styleText){
        if(element.style.setAttribute)
            element.style.setAttribute("cssText", styleText );
        else
            element.setAttribute("style", styleText );
    }

    /* getStyle function */
    function getStyle(element){
        var styleText = element.getAttribute('style');
        if(styleText == null)
            return "";
        if (typeof styleText == 'string') // !IE
            return styleText;
        else  // IE
            return styleText.cssText;
    }

Tenga en cuenta que esto solo funciona para estilos en línea ... no para estilos que ha especificado a través de una clase o algo así ...

Otra nota: puede que tenga que escapar de algunos caracteres en esa declaración de reemplazo, pero se entiende la idea.

— MaxOvrdrv
fuente
-3

Para cambiar todas las clases para un elemento:

document.getElementById("ElementID").className = "CssClass";

Para agregar una clase adicional a un elemento:

document.getElementById("ElementID").className += " CssClass";

Para verificar si una clase ya está aplicada a un elemento:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )
— thejustv
fuente
1
La pregunta era cómo eliminar un estilo, esta respuesta no tiene nada que ver con eso.
— whitneyland el
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.