19

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.

4 Answers 4

39

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";
4
document.getElementById("darkOverlay").removeAttribute("style");

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

1
  • 2
    Wrong solution. It will remove other styling effects with background.
    – user2852575
    Commented Apr 22, 2019 at 12:24
3

try

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

Try this:

var element = document.getElementById('darkOverlay');
element.style.backgroundColor = null;
element.style.opacity = null;
1
  • 2
    element.style.background-color is not a viable variable notation in Javascript. Use either element.style.backgroundColor or element.style['background-color'].
    – connexo
    Commented Nov 2, 2016 at 13:27

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.