Javascript - Remove the background element - no jQuery

Question

So I have this DOM code :

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>
<script>
    var foobarElement = document.getElementById('foobar');
    foobarElement.style.backgroundImage = '';
    foobarElement.style.background = '';
    foobarElement.style.backgroundUrl = '';
    foobarElement.style.backgroundColor = 'green';
</script>

With a CSS property on the div :

#foobar {
    background: rgba(0, 0, 0, 0) url("https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png") repeat scroll 0 0;
}

(ugly) Fiddle

As you can see, I'm trying to REMOVE entirely the background attribute CSS (in my example the Google Logo), without Jquery.

In my example, I can't edit CSS, neither write DOM stuff before the <div id="foobar">.

NB: all is working fine if in CSS I use background-image with the same url instead of background

Any idea ?

Source:

• Remove Style on Element
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Answer 1

You should only use the following code:

 var foobarElement = document.getElementById('foobar');
 foobarElement.style.background = 'none';

Setting a style property to '' removes the currently set value and does not set it to an empty one.

The code you have written:

var foobarElement = document.getElementById('foobar');
foobarElement.style.backgroundImage = '';
foobarElement.style.background = '';
foobarElement.style.backgroundUrl = '';
foobarElement.style.backgroundColor = 'green';

Will result into:

<div id="foobar" style="background-color: green">

So the background-image of your #foobar rule is still applied.

If you do just the foobarElement.style.background = 'none'; then it will result into:

<div id="foobar" style="background: none">

Which will overwrite the background-image set by the #foobar rule. Alternatively if you only want to remove the background image then you would use foobarElement.style.backgroundImage = 'none';

Answer 2

Little tricky, anyway working fine , Use

 foobarElement.style.background="0";

https://jsfiddle.net/zn2g73rz/9/