web-dev-qa-db-fra.com

Comment supprimer la propriété css en utilisant javascript?

est-il possible de supprimer une propriété CSS d'un élément en utilisant JavaScript? par exemple. J'ai div.style.zoom = 1.2, maintenant je veux supprimer la propriété de zoom via JavaScript?

javascriptcss
172
sat

En règle générale, vous ne pouvez pas supprimer les propriétés des objets intégrés de cette manière, et certainement pas dans IE (l'attribut zoom de l'objet style est une extension IE).

Vous pouvez le définir sur la valeur par défaut:

el.style.zoom = "";

le zoom effectif sera désormais celui qui suit les définitions définies dans les feuilles de style (via les balises link et style)

Donc, cette syntaxe ne modifiera que le style local de cet élément.

162
Roland Bouman

removeProperty supprime le style d'un élément.

Exemple:

div.style.removeProperty ('zoom');

Page de documentation MDN:
CSSStyleDeclaration.removeProperty

99
Edvinas Ilčenko
div.style.removeProperty('zoom');
19
joe

Vous pouvez utiliser l'objet styleSheets:

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

Mise en garde n ° 1: Vous devez connaître l'index de votre feuille de style et l'index de votre règle.

Mise en garde n ° 2: Cet objet est implémenté de manière incohérente par les navigateurs. ce qui fonctionne dans l'un peut ne pas fonctionner dans les autres.

9
james.garriss
element.style.height = null;

sortie:

<div style="height:100px;"> 
// results: 
<div style="">
6
T.Todua

Vous pouvez essayer de trouver tous les éléments de cette classe et de définir la propriété "zoom" sur "rien".

Si vous utilisez la bibliothèque javascript jQuery, vous pouvez le faire avec $(".the_required_class").css("zoom","")

Edit: Suppression de cette déclaration car elle s’est avérée fausse, comme indiqué dans un commentaire et d’autres réponses, ce qui est effectivement possible depuis 2010.

False: il n'y a pas de moyen généralement connu pour modifier les feuilles de style à partir de JavaScript.

4
naivists

Vous pouvez également le faire dans jQuery en disant $(selector).css("zoom", "")

1
TryingToImprove

Cela devrait faire l'affaire - définir le style en ligne sur normal pour le zoom:

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

0
Matt

en fait, si vous connaissez déjà la propriété, cela le fera ...

par exemple:

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

Notez que cela ne fonctionne que pour les styles en ligne ... pas pour les styles que vous avez spécifiés via une classe ou quelque chose comme ça ...

Autre remarque: vous devrez peut-être échapper des caractères dans cette instruction de remplacement, mais vous aurez l’idée.

0
MaxOvrdrv