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, je dois div.style.zoom = 1.2, maintenant je veux supprimer la propriété de zoom via JavaScript?

Vous avez deux options:

OPTION 1:

Vous pouvez utiliser la méthode removeProperty . Cela supprimera un style d'un élément.

el.style.removeProperty('zoom');

OPTION 2:

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

el.style.zoom = "";

Le zoom effectif sera désormais celui qui découle des définitions définies dans les feuilles de style (via les liens et les balises de style). Cette syntaxe ne modifiera donc que le style local de cet élément.

removeProperty supprimera un style d'un élément.

Exemple:

div.style.removeProperty ('zoom');

Page de documentation MDN:
CSSStyleDeclaration.removeProperty

div.style.removeProperty('zoom');

Vous pouvez utiliser l'objet styleSheets:

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

Avertissement # 1: Vous devez connaître l'index de votre feuille de style et l'index de votre règle.

Avertissement # 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.

element.style.height = null;

production:

<div style="height:100px;"> 
// results: 
<div style="">

Vous pouvez essayer de trouver tous les éléments qui ont 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 il s'est avéré ne pas être vrai, comme indiqué dans un commentaire et d'autres réponses, il est en effet possible depuis 2010.

Faux: il n'existe aucun moyen généralement connu de modifier les feuilles de style à partir de JavaScript.

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

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

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

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 les styles que vous avez spécifiés via une classe ou quelque chose comme ça ...

Autre remarque: vous devrez peut-être échapper certains caractères dans cette instruction replace, mais vous avez l'idée.

Pour modifier toutes les classes d'un élément:

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

Pour ajouter une classe supplémentaire à un élément:

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

Pour vérifier si une classe est déjà appliquée à un élément:

if ( document.getElementById("ElementID").className.match(/(?:^|\s)CssClass(?!\S)/) )