how to remove css property using javascript?

Question

is it possible to remove a CSS property of an element using JavaScript ? e.g. I have div.style.zoom = 1.2, now i want to remove the zoom property through JavaS

Answer 1

div.style.removeProperty('zoom');

Answer 2

actually, if you already know the property, this will do it...

for example:

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

Note that this only works for inline styles... not styles you've specified through a class or something like that...

Other note: you may have to escape some characters in that replace statement, but you get the idea.

Answer 3

removeProperty will remove a style from an element.

Example:

div.style.removeProperty('zoom');

MDN documentation page:
CSSStyleDeclaration.removeProperty

Answer 4

You can also do this in jQuery by saying $(selector).css("zoom", "")