38

我有以下 HTML：

<div id="tab1" style="position:relative; background-image:url(buttons/off.png);
    <a href="javascript:ChangeBackgroundImageOfTab('tab1', 'on');">
        <img id="DivBtn1" name="DivBtn1" src="buttons/text.png" >
    </a>
</div>

和以下Javascript：

function ChangeBackgroungImageOfTab(tabName, imagePrefix)
{
    document.getElementById(tabName).style.background-image= 'url("buttons/" + imagePrefix + ".png")';
}

当我尝试通过调用 getElementByID 设置选项卡背景图像时出现问题 - 我现在知道如何创建一个动态 URL，该 URL 使用传入的参数以及其他一些硬编码值。在这种情况下，我们将 OFF 背景图像与 ON 背景图像交换。

我怎样才能做到这一点？有没有办法使用 javascript 变量，为其分配完整路径，然后将其作为背景图像路径发送到调用中？

4

3 回答 3

62

你需要连接你的字符串。

document.getElementById(tabName).style.backgroundImage = 'url(buttons/' + imagePrefix + '.png)';

你有它的方式，它只是制作 1 个长字符串，而不是实际解释 imagePrefix。

我什至建议单独创建字符串：

function ChangeBackgroungImageOfTab(tabName, imagePrefix)
{
    var urlString = 'url(buttons/' + imagePrefix + '.png)';
    document.getElementById(tabName).style.backgroundImage =  urlString;
}

正如下面 David Thomas 所提到的，您可以在字符串中去掉双引号。这是一篇小文章，可以更好地了解字符串和引号/双引号之间的关系：http ://www.quirksmode.org/js/strings.html

于 2013-09-06T20:07:45.117 回答
9

据我所知，正确的语法是：

function ChangeBackgroungImageOfTab(tabName, imagePrefix)
{
    document.getElementById(tabName).style.backgroundImage = "url('buttons/" + imagePrefix + ".png')";
}

所以基本上，getElementById(tabName).backgroundImage并将字符串拆分为：

"cssInHere('and" + javascriptOutHere + "/cssAgain')";
于 2013-09-06T20:08:19.847 回答
0

如果您正在寻找直接方法并local在这种情况下使用文件。尝试

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
/>

JS内联样式就是这种情况Image，您必须使用路径导入本地文件。

于 2020-12-04T20:45:15.120 回答