Javascript ayarlama fonksiyonu ve fonksiyon parametresi aracılığıyla bir DIV arka plan görüntüsünü

Question

Aşağıdaki HTML vardır:

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

ve aşağıdaki Javascript i ayarlamaya çalıştığınızda

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

sorunu da ortaya çıkıyor getElementByID çağrısı aracılığıyla sekmeler arka plan resmi - Şimdi, diğer bazı sabit kodlanmış değerlerle birlikte iletilen parametreyi kullanan dinamik bir URL'nin nasıl oluşturulacağını biliyorum. Bu durumda, KAPALI arka plan görüntüsünü AÇIK arka plan görüntüsü ile değiştiriyoruz.

Bunu nasıl yapabilirim? Bir javascript değişkeni kullanmanın bir yolu var mı, ona tam yolu ata, sonra da arayana arkaplan görüntü yolu olarak gönder?

Answer 1

Dizeninizi birleştirmeniz gerekir.

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

mıydın yolu, sadece 1 uzun dize yapma ve aslında imagePrefix yorumlama değil.

Hatta ayrı dize oluşturma öneririm: Aşağıda David Thomas tarafından belirtildiği gibi

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

, kendi dizede çift tırnak hendek. Yani temelde

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

getElementById(tabName).backgroundImage ve bölünmüş: http://www.quirksmode.org/js/strings.html bildiğim kadarıyla

Answer 2

doğru sözdizimi şöyledir: İşte nasıl dizeleri ve tırnak daha iyi bir fikir edinmek için biraz makale/çift tırnak ilişkilidir dize gibi:

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