如何使用 javascript 更改按钮背景？

Question

我有一个应用了以下 CSS 背景规则的按钮：

background-image:url('/images/button_1_normal.png');

Answer 1

no-repeat无效。 仅URL部分是背景图片属性的有效值。

删除它或将您的分配更改为background ：

document.getElementById(step2)
    .style.background="url('images/button_1_active.png') no-repeat";

Answer 2

我想你想要这样的东西。 重复由css设置的第一个图像，因为未给出其他顺序。 但是当使用javascript进行更改时，您还希望“不重复”

的CSS

#button {
    background-image: url('http://imageshack.us/a/img856/3817/ticklf.png');
}

的HTML

<button id="button">Button</div>

Java脚本

setTimeout(function () {
    var button = document.getElementById("button");

    button.style.backgroundImage = "url('http://imageshack.us/a/img822/1917/crossn.png')";
    button.style.backgroundRepeat = "no-repeat";
}, 2000);

在jsfiddle上

Answer 3

看一下这个。 这是一个有效的示例代码。 检查图像路径。 我的图片文件夹与我的javascript文件处于同一级别。

 const actionButton = document.getElementById('action'); actionButton.style.backgroundImage = "url('./images/icon_playback.png')"; 

 <button id="action"></button> 

Answer 4

你可以试试这个

document.getElementById（“ step2”）。style ='background-image：none; 背景颜色：＃3d8ed4;';

Answer 5

您将元素 id 设置为变量，添加引号以解决问题：

document.getElementById('step2').style.backgroundImage = "url('images/button_1_active.png') no-repeat";

JS 仅将引号内的字符串作为文本输入。