更改 backgroundImage 属性时遇到问题答案

【问题标题】：Trouble with changing the backgroundImage property更改 backgroundImage 属性时遇到问题
【发布时间】：2009-11-05 04:03:16
【问题描述】：

我在页面上有一个元素，使用 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;

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

此外，当我检查（使用警报）更改背景图像属性之前和之后设置的内容时：

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

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

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

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

【问题讨论】：

您是否确保您尝试加载的图像存在于给定路径中？您的代码显示正确。
是的，我做到了。请参阅下面的答案。我必须确保它是完整路径（不是相对路径）。

标签： javascript css

【解决方案1】：

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

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

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

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

【讨论】：

我在下面发布我的答案后看到了这个。我通过反复试验弄明白了。不过非常感谢。

【解决方案2】：

好的，

第一个出现空白的警报是因为显然（在 IE 中）我需要做：

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

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

【讨论】：