Javascript-Instelling achtergrondafbeelding van een DIV via een functie en functieparameter

Ik heb de volgende 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>

en het volgende Javascript:

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

Het probleem doet zich voor wanneer ik de achtergrondafbeelding van de tabbladen probeer in te stellen via een oproep naar getElementByID – ik weet nu hoe ik een dynamische URL moet maken die de parameter gebruikt die is doorgegeven, samen met enkele andere hardgecodeerde waarden. In dit geval verwisselen we de UIT-achtergrondafbeelding met de AAN-achtergrondafbeelding.

Hoe kan ik dit doen? Is er een manier om een javascript-variabele te gebruiken, het volledige pad eraan toe te wijzen en het vervolgens naar de aanroep te sturen als het pad voor de achtergrondafbeelding?

Antwoord 1, autoriteit 100%

Je moet je string samenvoegen.

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

Zoals je het had, het maakt maar 1 lange string en interpreteert imagePrefix niet echt.

Ik zou zelfs willen voorstellen om de string apart te maken:

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

Zoals vermeld door David Thomas hieronder, kunt u de dubbele aanhalingstekens in uw string slapen. Hier is een klein artikel om een ​​beter idee te krijgen van hoe strings en quotes / dubbele aanhalingstekens zijn gerelateerd: http: //www.quirksmode .org / js / strings.html

Antwoord 2, Autoriteit 15%

Van wat ik weet, de juiste syntaxis is:

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

Zo eigenlijk, getElementById(tabName).backgroundImageen split de reeks zoals:

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

Antwoord 3

Als u op zoek bent naar een directe aanpak en het gebruik van een localbestand in dat geval.
Probeer

<div
style={{ background-image: 'url(' + Image + ')', background-size: 'auto' }}
/>

Dit is het geval van JSmet inline styling waar Imageeen lokaal bestand is dat u moet hebben geïmporteerd met een pad.