Use the style. removeProperty() method to remove CSS style properties from an element, e.g. box. style. removeProperty('background-color') .
Just as you can use JavaScript to change the HTML in a web page, you can also use it to change CSS styles. The process is very similar. After you've selected an element, you can change its style by attaching the style property to the selector, followed by the style you want to change.
There are several ways to overwrite CSS properties from external libraries. Case 1: if you're using Bootstrap or Zurb Foundation via npm package, you need to change a variable value that is responsible for given property and place it after importing all library files to ovewrite correctyly eg.
The unset CSS keyword resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.
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.
removeProperty will remove a style from an element.
Example:
div.style.removeProperty('zoom');
MDN documentation page:
CSSStyleDeclaration.removeProperty
div.style.removeProperty('zoom');
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With