web-dev-qa-db-fra.com

Javascript-Réglage de l'image de fond d'une DIV via une fonction et un paramètre de fonction

J'ai le code HTML suivant:

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

et le Javascript suivant:

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

Le problème se pose lorsque j'essaie de définir l'image d'arrière-plan des onglets via un appel à getElementByID. Je sais maintenant comment créer une URL dynamique qui utilise le paramètre qui a été transmis, ainsi que d'autres valeurs codées en dur. Dans ce cas, nous échangeons l’image d’arrière-plan OFF avec l’image d’arrière-plan ON.

Comment puis-je faire ceci? Existe-t-il un moyen d'utiliser une variable javascript, de lui attribuer son chemin complet, puis de l'envoyer à l'appel en tant que chemin de l'image d'arrière-plan?

javascripthtmlcssurl
29
jordan

Vous devez concaténer votre chaîne.

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

La façon dont vous l'avez eu, c'est juste faire une longue chaîne et ne pas interpréter réellement imagePrefix.

Je suggérerais même de créer la chaîne séparée:

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

Comme mentionné par David Thomas ci-dessous, vous pouvez supprimer les guillemets dans votre chaîne. Voici un petit article pour avoir une meilleure idée de la façon dont les chaînes et les guillemets/doubles guillemets sont liés: http://www.quirksmode.org/js/strings.html

46
TyMayn

D'après ce que je sais, la syntaxe correcte est la suivante:

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

Donc, fondamentalement, getElementById(tabName).backgroundImage et diviser la chaîne comme suit:

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