304

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 ?

Improve this question
1

9 Answers 9

Reset to default
382

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

… along with user CSS and the browser default styles.
I understood the OP to mean that they wanted to make it as though they had not set the style property of the element, which is exactly what you've provided. I tried using el.style.removeProperty('zoom'); (or 'fill', actually, in my case) that seems to do the same thing in IE, and get ignored by the other browsers. For some reason I was surprised to find that setting it to a blank string has the same effect and seems to work on all (recent versions of) the browsers.
Is this behaviour specified anywhere in a standard? I can't find it :-(
@OliverJosephAsh yes it's documented, see this answer below stackoverflow.com/a/7901886/700206
I will use method 1 for CSS variables
131

removeProperty will remove a style from an element.

Example:

div.style.removeProperty('zoom');

MDN documentation page:
CSSStyleDeclaration.removeProperty

Improve this answer

2 Comments

This is very nice, because styles from classes will be kept applied.
Note: Multi-word property names are hyphenated and not camel-cased.
31 
div.style.removeProperty('zoom');
Improve this answer

Comments

13 
element.style.height = null;

output:

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

4 Comments

It seems that setting style to null does not work in IE11.
Why someone should care of IE browsers? I intentionaly ignore them already for years.
@T.Todua Is it necessary to use an inline code-block for a browser name? But yes, I completely agree - Microsoft has stopped supporting the browser since 2016.
Yeah, it was trash, anyways. ( But IE is still supported on my PC, no jokes, but still ended the support for it :/ )
10

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.

Improve this answer

12 Comments

This seems really brittle. Won't it break whenever your indices change?
Yep. That's exactly what caveat #1 says.
My Chrome 26 doesn't have CSSStyleRule.prototype.removeProperty =( In fact CSSStyleRule doesn't have any methods. =(
CSSStyleSheet.prototype.removeRule to the rescue.
@Rudie, isn't it CSSStyleSheet.prototype.deleteRule?
|
5

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.

Improve this answer

4 Comments

Yes, there is. Modifying stylesheets programatically though javascript isn't hard. It works cross-browser with great performance and really makes sense when changing one property that should be the same on a bunch of elements. As was the case Jan 2010 as well. Here's a brief example: stackoverflow.com/questions/14927706/…
Clox: Adding stylesheets that override some property programmatically - of course! Modifying the ones already loaded - Haven't heard of it.
Is it meant to be css() rather than attr(). Or is it perhaps attr() in IE?
it should actually be css, not attr, you're right.
1

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

Improve this answer

Comments

0

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.

Improve this answer

Comments

-4

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)/) )
Improve this answer

1 Comment

The question was how to remove a style, this answer has nothing to do with that.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.