Javascript remove background color and opacity

Question

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.

andreas · Accepted Answer · 2018-08-07T08:41:28.377

40

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";

edited Aug 07 '18 at 08:41

answered Nov 02 '16 at 13:10

andreas

16,357
12
72
76

score 4 · Answer 2 · answered Nov 02 '16 at 13:08

4

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

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

answered Nov 02 '16 at 13:08

2

Wrong solution. It will remove other styling effects with background. – Apr 22 '19 at 12:24

score 3 · Answer 3 · edited Mar 11 '21 at 11:51

3

try

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

edited Mar 11 '21 at 11:51

capo11

790
3
11
32

answered Nov 02 '16 at 13:08

OliverRadini

6,238
1
21
46

weinde · Answer 4 · 2022-04-21T11:22:09.663

1

Try this:

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

edited Apr 21 '22 at 11:22

answered Nov 02 '16 at 13:10

weinde

1,074
3
13
32

2

`element.style.background-color` is not a viable variable notation in Javascript. Use either `element.style.backgroundColor` or `element.style['background-color']`. – connexo Nov 02 '16 at 13:27

Javascript remove background color and opacity

4 Answers4