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 ?

Solution 1:

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.

Solution 2:

removeProperty will remove a style from an element.

Example:

div.style.removeProperty('zoom');

MDN documentation page:
CSSStyleDeclaration.removeProperty

Solution 3:

div.style.removeProperty('zoom');

Solution 4:

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.

Solution 5:

element.style.height = null;

output:

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