web-dev-qa-db-ja.com

関数および関数パラメーターを介したDIVのJavaScript設定の背景画像

次の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変数を使用して、フルパスを割り当て、それを背景画像パスとして呼び出しに送信する方法はありますか？

javascripthtmlcssurl
29
jordan

文字列を連結する必要があります。

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

46
TyMayn

私が知っていることから、正しい構文は次のとおりです。

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

基本的に、getElementById(tabName).backgroundImageを使用して、次のように文字列を分割します。

_"cssInHere('and" + javascriptOutHere + "/cssAgain')";
_
8
moritzpflaum