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>

и следующий Javascript:

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

Проблема возникает, когда я пытаюсь установить фоновое изображение вкладки с помощью вызова getElementByID. Теперь я знаю, как создать динамический URL-адрес, который использует переданный параметр, наряду с некоторыми другими жестко закодированными значениями. В этом случае мы заменяем фоновое изображение OFF с помощью фонового изображения ON.

Как я могу это сделать? Есть ли способ использовать переменную javascript, назначить полный путь к ней, а затем отправить ее в вызов в качестве пути к фоновому изображению?

Ответ 1

Вам нужно объединить строку.

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

Как уже упоминалось Дэвидом Томасом ниже, вы можете вырезать двойные кавычки в своей строке. Вот небольшая статья, чтобы лучше понять, как связаны строки и цитаты/двойные кавычки: http://www.quirksmode.org/js/strings.html

Ответ 2

Из того, что я знаю, правильный синтаксис:

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

Итак, в основном, getElementById(tabName).backgroundImage и разделим строку как:

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