2

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

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

我想用 JavaScript 改变按钮的背景。我尝试了以下但没有奏效。

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

问题是什么？谢谢

4

5 回答 5

5

no-repeat is invalid. Only the URL part is a valid value for the background image property.

Either remove that or change your assignment to background:

document.getElementById(step2)
    .style.background="url('images/button_1_active.png') no-repeat";
于 2013-05-07T21:28:38.847 回答
4

我想你想要这样的东西。重复由 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 上

于 2013-05-07T21:46:01.657 回答
0

尝试这个：

document.getElementById("step2").style = 'background-image: none; background-color:#3d8ed4;';
于 2019-10-24T11:36:22.523 回答
0

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

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

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

于 2022-02-01T18:31:34.787 回答
0

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

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

于 2019-02-22T15:55:55.527 回答