Javascript - 移除背景元素 - 无需jQuery

Question

Javascript - 移除背景元素 - 无需jQuery

7

我有这段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>

元素上使用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

如你所见，我想完全删除CSS中的background属性（在我的例子中是Google标志），但不使用JQuery。

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

NB：如果在CSS中使用相同URL的background-image而不是background，则一切正常。

有什么想法吗？

来源：

- 4wk_

1

通常这个评论会以“欢迎来到Stack Overflow！”开头，但是... :-) 与你的问题相关的任何代码都必须在你的问题中，而不仅仅是链接。链接会失效，使得问题及其答案对未来的人毫无用处，人们不应该跟随一些随意的链接来帮助你。如果问题没有意义，不能在没有链接的情况下回答，那么它就不适合在这个网站上提问。相反，请将最小完整示例放在问题中。 - T.J. Crowder

好吧，我其实不是“新手”Stack，但没关系。这里有大量的问题只包含JsFiddle链接，但我理解你的观点，我会编辑我的问题。顺便说一句，谢谢你的即时投票... - 4wk_

说实话，我真的不知道为什么有人用关闭标记来踩我：我没有说“我的代码不工作”，我只是问了一个问题，而且人们回答了我。无论如何，我猜经营一个公司会让你变得自大吧 ;) - 4wk_

2

侮辱是对批评的不当反应，尤其是明确、礼貌和温和的批评。
永远不要假设发表评论的人和投票反对的人是同一个人：你会错得更多，就像这种情况一样：我投票关闭了上面引用的原因，这在此处中已经清楚地阐述了。我没有投反对票，那是别人，也许是赞同评论的人（或者当然是其他人）。但是投反对票是合理的，因为看不见的代码从定义上来说是“不清楚的”。

- T.J. Crowder

放松，"大脑袋"不是一种侮辱。
请接受我的道歉，我误以为"关闭投票"会自动投反对票。我的错误，问题解决了。

- 4wk_

4个回答

5

小有些棘手，但无论如何都能正常工作。请使用

。

 foobarElement.style.background="0";

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

- Yuvifan

也可以，谢谢！不过我更喜欢“none”的方式 ;) - 4wk_

0

你可以使用

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>

- iamsujit

谢谢，但我读到removeProperty并不被所有浏览器支持。对吧？ - 4wk_

1

@4wk_ 不，它支持大多数浏览器，请参见此处。 - iamsujit

0

请尝试以下 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>

- Rajesh

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- t.niese · Accepted Answer

您应该只使用以下代码：

 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 = 'url(新图片地址)';。另外，如果你只想删除背景图像，那么可以使用foobarElement.style.backgroundImage = 'none';