Javascript-通过函数和函数参数设置DIV的背景图像

Question

我有以下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,以及一些其他硬编码值.在这种情况下,我们使用ON背景图像交换OFF背景图像.

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

Answer 1

你需要连接你的字符串.

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

你拥有它的方式,它只是制作一个长字符串而不是实际解释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

Answer 2

据我所知,正确的语法是:

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

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

"cssInHere('and" + javascriptOutHere + "/cssAgain')";