Javascript-Einstellung Hintergrundbild eines DIV über eine Funktion und Funktionsparameter

Question

Ich habe folgende 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> 

und die folgende Javascript:

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

Das Problem entsteht, wenn ich gesetzt versuchen, Das Tabs-Hintergrundbild über einen Aufruf von getElementByID - Ich weiß jetzt, wie man eine dynamische URL erstellt, die den übergebenen Parameter zusammen mit einigen anderen hartcodierten Werten verwendet. In diesem Fall tauschen wir das OFF-Hintergrundbild mit dem ON-Hintergrundbild aus.

Wie kann ich das tun? Gibt es eine Möglichkeit, eine JavaScript-Variable zu verwenden, den vollständigen Pfad zu ihr zuzuweisen und sie dann als Hintergrundbildpfad in den Aufruf zu senden?

Answer 1

Sie müssen Ihre Zeichenfolge verketten.

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

Die Art, wie Sie es hatten, es macht nur 1 lange Zeichenfolge und nicht wirklich ImagePrefix interpretieren.

Ich würde sogar vorschlagen, die Zeichenfolge getrennt zu erstellen:

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

Wie unten von David Thomas erwähnt, können Sie die doppelten Anführungszeichen in der Zeichenfolge Graben kann. Hier ein kleiner Artikel ist eine bessere Vorstellung davon, wie Strings und Zitate/doppelte Anführungszeichen zu bekommen sind ähnlich: http://www.quirksmode.org/js/strings.html

Answer 2

Von dem, was ich weiß, die richtige Syntax:

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

Also im Grunde getElementById(tabName).backgroundImage und spaltete sich die String wie:

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