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

我有以下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>

当我试图通过调用getElementByID来设置选项卡背景图像时，问题就出现了——我现在知道如何创建一个动态URL，该URL使用传入的参数以及一些其他硬编码值。在本例中，我们将背景图像与背景图像交换

---

我该怎么做？是否有某种方法可以使用javascript变量，为其分配完整路径，然后将其作为背景图像路径发送到调用中？

您需要连接字符串

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在下面提到的，您可以去掉字符串中的双引号。下面是一篇小文章，可以更好地了解字符串和引号/双引号的关系：

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

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

因此，基本上，

getElementById（tabName）.backgroundImage

并拆分字符串，如下所示：

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

---

如果您正在寻找直接方法，并在这种情况下使用

local

文件。 试一试

---

这是带有内联样式的

JS

的情况，其中

Image

是一个本地文件，必须使用路径导入。

参数是如何传入的？通过此调用：-它只是一个字符串。当用户单击链接节点内部的图像时，将调用该函数，并将“on”的值发送到该函数中，这表示我们需要将父div的背景图像更改为on。png@RienNeVaPlus是输入错误，请尽快更正。如果您的图像路径格式不正确，则应为“url”（“按钮/”）+imagePrefix+”“.png”）”；您还需要使用

style.backgroundImage

，而不是

style.backgroundImage

。为什么字符串中包含

“

？直到现在我才看到，但是属性、变量、名称（它将被解释为运算符）中不能有

-

，请使用camel case:

backgroundColor

。单独创建字符串是可行的。将其内联并不起作用，但编译和运行正确，没有错误。谢谢你的帮助！酷。有些人认为，像这样单独创建字符串会创建更多的代码。我发现这样做有助于调试，因为我可以使用ol'console.log.：）准确地看到要分配的内容@完全是季马因。我同意。当您只需将鼠标悬停在变量上，而不用在控制台或即时窗口中键入它时，调试就容易多了。getelementbyId不需要#divname-only id的名称，而不需要#

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

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