Javascript-Impostazione immagine di un DIV sfondo tramite un parametro di funzione e la funzione

Question

Ho il seguente codice 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> 

e la seguente Javascript:

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

Il problema si pone quando cerco di impostare l'immagine di sfondo delle schede tramite una chiamata a getElementByID: ora so come creare un URL dinamico che utilizza il parametro passato, insieme ad altri valori codificati. In questo caso, stiamo scambiando l'immagine di sfondo OFF con l'immagine di sfondo ON.

Come posso fare questo? C'è un modo per usare una variabile javascript, assegnare il percorso completo ad esso, quindi inviarlo nella chiamata come percorso dell'immagine di sfondo?

Answer 1

È necessario concatenare la stringa.

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

Il modo in cui l'avevi, è solo fare 1 lunga serie e non in realtà interpretare imagePrefix.

Vorrei anche suggerire la creazione della stringa separata:

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

Come accennato da David Thomas di seguito, è possibile abbandonare le virgolette doppie nella stringa. Ecco un piccolo articolo per avere una migliore idea di come stringhe e citazioni/doppi apici sono correlate: http://www.quirksmode.org/js/strings.html

Answer 2

Da quello che so, la sintassi corretta è:

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

Quindi, fondamentalmente, getElementById(tabName).backgroundImage e dividere il come:

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