'Javascript remove background color and opacity

How can I remove the background-color and opacity property using Javascript only (no Jquery!).

I tried this:

document.getElementById('darkOverlay').style.removeProperty("background-color");
document.getElementById('darkOverlay').style.removeProperty("opacity");

but it did not work.

javascripthtmlcssbackgroundopacity


Solution 1:[1]

You can just reset properties by either setting them to an empty string:

document.getElementById('darkOverlay').style.backgroundColor = "";
document.getElementById('darkOverlay').style.opacity = "";

Or setting them to the default values you like:

document.getElementById('darkOverlay').style.backgroundColor = "transparent";
document.getElementById('darkOverlay').style.opacity = "1";

Solution 2:[2]

document.getElementById("darkOverlay").removeAttribute("style");

Works fine for me... Works only if you put your opacity attribute and background in style

Solution 3:[3]

try

document.getElementById('darkOverlay').style.backgroundColor= 'transparent';
document.getElementById('darkOverlay').style.opacity= 1;

Solution 4:[4]

Try this:

var element = document.getElementById('darkOverlay');
element.style.backgroundColor = null;
element.style.opacity = null;

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2
Solution 3 capo11
Solution 4

Related Questions