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

【问题标题】：Javascript - Remove the background element - no jQueryJavascript - 删除背景元素 - 没有 jQuery
【发布时间】：2015-11-13 10:17:13
【问题描述】：

所以我有这个 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;
}

（丑）Fiddle

如您所见，我正在尝试完全删除 background 属性 CSS（在我的示例中为 Google 徽标），而不使用 Jquery。

在我的示例中，我无法编辑 CSS，也无法在 <div id="foobar"> 之前编写 DOM 内容。

注意：如果在 CSS 中我使用具有相同 url 的 background-image 而不是 background，一切都可以正常工作

有什么想法吗？

来源：

【问题讨论】：

通常此评论以“欢迎来到 Stack Overflow！”开头，但是... :-) 与您的问题相关的任何代码都必须是 in 您的问题，而不仅仅是链接.链接腐烂，使问题及其答案对未来的人们毫无用处，人们不应该遵循一些随机链接来帮助你。如果这个问题没有意义并且没有链接就无法回答，那么它不适合这个网站。而是将minimum complete example 放在问题中。
好吧，我实际上并不是堆栈的“新人”，但没关系。这里提出的大量问题仅包含一个 JsFiddle 链接，但我理解您的观点，我将编辑我的问题。顺便说一句，您可以立即投票...
老实说，我真的不知道为什么用关闭标志对我投反对票：我没有说“我的代码不起作用，我问了一个问题，人们回答了我。无论如何，我猜猜经营一家公司会让你头脑发热；）
1.侮辱是对批评的不恰当反应，尤其是明确、礼貌和温和的批评。 2. 永远不要假设评论的人和反对的人是同一个人：你的错误比正确的次数要多，例如在这种情况下：我投票关闭是因为上面提到的原因，这在here 中明确列出。我没有投反对票，那是其他人，也许是对评论投赞成票的人（或者，当然是其他人）。但是投反对票是合理的，因为不可见的代码根据定义是“不清楚的”。
1.放轻松，“大脑袋”不是侮辱。 2. 请接受我的歉意，认为“近距离投票”会自动投反对票。我的错。案件结案。

标签： javascript dom

【解决方案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">

所以你的#foobar 规则的background-image 仍然适用。

如果您只执行foobarElement.style.background = 'none';，则会导致：

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

这将覆盖#foobar 规则设置的background-image。或者，如果您只想删除背景图像，则可以使用 foobarElement.style.backgroundImage = 'none';

【讨论】：

不错，确实我没有想到“无”...谢谢先生！
@4wk_ 使用css3 还可以使用initial 将值设置为规范定义的默认值，但现在IE 是not supported

【解决方案2】：

有点棘手，反正工作正常，使用

 foobarElement.style.background="0";

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

【讨论】：

也可以，谢谢！但是我更喜欢“无”的方式；）

【解决方案3】：

试试下面是JSFiddle

代码

function removeBackground(){
	document.getElementById("foobar").style.background= "none";
}

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

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>

<button onclick='removeBackground()'>Remove Background</button>
<script>
    var foobarElement = document.getElementById('foobar');
    foobarElement.style.backgroundImage = '';
    foobarElement.style.background = '';
    foobarElement.style.backgroundUrl = '';
    foobarElement.style.backgroundColor = 'green';
</script>

【讨论】：

【解决方案4】：

你可以使用

div.style.removeProperty('background');

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

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

<div id="foobar">
    H<br />
    e<br />
    l<br />
    l<br />
    o
</div>

【讨论】：

谢谢，但我了解到并非所有浏览器都支持removeProperty。对吧？
@4wk_ 不支持大多数浏览器，see here