javascript - 更改 backgroundImage 属性时遇到问题

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 );

第一个警报显示空白(空字符串)，第二个警报显示新图像 url。

所以这里肯定发生了一些奇怪的事情。我只是不确定是什么。谁能帮忙？

编辑: 但是，如果我只更改 backgroundColor 属性并将 backgroundImage 设置为“无”，则更改似乎工作得很好(意思是，backgroundImage 像以前一样消失，我可以看到新的 backgroundColor。

Answer 1

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

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

The first alert shows blank (empty string)

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