Javascript - 删除背景元素 - 没有jQuery

Question

所以我有这个DOM代码:

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

在div上使用CSS属性:

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

(丑陋)小提琴

正如您所看到的,我正在尝试完全删除background属性CSS(在我的示例中为Google徽标),而不使用Jquery.

在我的例子中,我无法编辑CSS,也没有编写DOM之前的东西<div id="foobar">.

注意:如果在CSS中使用background-image相同的url而不是使用CSS,则一切正常background

任何的想法 ？

资源:

• 删除元素上的样式
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference

Answer 1

您应该只使用以下代码:

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

设置样式属性以''删除当前设置的值,并且不将其设置为空值.

你写的代码:

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

将导致:

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

因此background-image,您的#foobar规则仍然适用.

如果你这样做foobarElement.style.background = 'none';那么它将导致:

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

这将覆盖规则的background-image集合#foobar.或者,如果您只想删除背景图像,那么您将使用foobarElement.style.backgroundImage = 'none';

Answer 2

有点棘手，无论如何工作正常，使用

 foobarElement.style.background="0";

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