Question

我有一个按钮，并且baeckground哦这个按钮是用这样的CSS设置的：

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

我想用javascript更改按钮的背景。我尝试了这个选项，但它没有用。

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

有什么问题？谢谢^^

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>

的Javascript

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; background-color：＃3d8ed4;';

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

4 个答案: