Question

我在页面上有一个元素，背景图像使用css设置：

// CSS snippet
.mystyle {
    background-image: url(some_image.gif);
    // and other styles like width, height, padding, text-align, etc.
}

// HTML snippet
<input type="button" name="mybutton" id="b1" class="mystyle" onclick="
some_function();" value="Apply">

在Javascript函数中，我正在尝试执行以下操作：

newImage = "url(new_image.gif)";
document.getElementById( "b1" ).style.backgroundImage = newImage;

这不起作用，旧的背景图像消失。

此外，当我检查（使用警报）在我更改之前和之后设置了backgroundImage属性时：

newImage = "url(new_image.gif)";
alert( document.getElementById( "b1" ).style.backgroundImage );
document.getElementById( "b1" ).style.backgroundImage = newImage;
alert( document.getElementById( "b1" ).style.backgroundImage );

第一个警报显示空白（空字符串），第二个警报显示newImage网址。

所以这里肯定会发生一些奇怪的事情。我只是不确定是什么。有人可以帮忙吗？

修改但是，如果我只更改backgroundColor属性并将backgroundImage设置为'none'，则更改似乎工作得很好（意思是，backgroundImage像以前一样消失，我可以看到新的backgroundColor。

Answer 1

document.getElementById（“b1”）。style.backgroundImage = newImage;

从脚本设置backgroundImage时，URL与页面URL相关。如果从外部样式表设置background-image，则URL与样式表相关。差异可能导致您的相对路径指向错误的位置。如果您想确定，请使用有根URL。

第一个警告显示空白（空字符串）

这是预期的。 style属性仅反映元素的内联style="..."属性的内容，而不反映通过样式表规则间接应用的任何样式。通过查看IE中的element.currentStyle或其他浏览器中的window.getComputedStyle，您可以更不可靠地获取该信息。或者，更好的是，在Firefox中使用Firebug或DOM检查器来调试正在应用的规则。

Answer 2

确定，

显示为空白的第一个警告是因为显然（在IE中）我需要这样做：

alert(document.getElementById( buttonMainId ).currentStyle.backgroundImage);

要更改背景图片，我需要构建完整的网址（http://blah/image.gif），以使其生效。

更改backgroundImage属性时遇到问题

2 个答案: