CODEWITHSUNDEEP
javascriptcss
sat
sat

Reputation: 41076

how to remove css property using javascript?

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 JavaScript ?

Upvotes: 299

Views: 445785

Answers (9)

Roland Bouman
Roland Bouman

Reputation: 31961

You have two options:

OPTION 1:

You can use removeProperty method. It will remove a style from an element.

el.style.removeProperty('zoom');

OPTION 2:

You can set it to the default value:

el.style.zoom = "";

The effective zoom will now be whatever follows from the definitions set in the stylesheets (through link and style tags). So this syntax will only modify the local style of this element.

Upvotes: 375

T.Todua
T.Todua

Reputation: 56341

element.style.height = null;

output:

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

Upvotes: 13

Edvinas Ilčenko
Edvinas Ilčenko

Reputation: 1451

removeProperty will remove a style from an element.

Example:

div.style.removeProperty('zoom');

MDN documentation page:
CSSStyleDeclaration.removeProperty

Upvotes: 131

naivists
naivists

Reputation: 33501

You can try finding all elements that have this class and setting the "zoom" property to "nothing".

If you are using jQuery javascript library, you can do it with $(".the_required_class").css("zoom","")

Edit: Removed this statement as it turned out to not be true, as pointed out in a comment and other answers it has indeed been possible since 2010.

False: there is no generally known way for modifying stylesheets from JavaScript.

Upvotes: 5

thejustv
thejustv

Reputation: 2035

To change all classes for an element:

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

To add an additional class to an element:

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

To check if a class is already applied to an element:

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

Upvotes: -4

TryingToImprove
TryingToImprove

Reputation: 7407

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

Upvotes: 1

MaxOvrdrv
MaxOvrdrv

Reputation: 21

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.

Upvotes: 0

joe
joe

Reputation: 768

div.style.removeProperty('zoom');

Upvotes: 31

james.garriss
james.garriss

Reputation: 13398

You can use the styleSheets object:

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

Caveat #1: You have to know the index of your stylesheet and the index of your rule.

Caveat #2: This object is implemented inconsistently by the browsers; what works in one may not work in the others.

Upvotes: 10

Related Questions