una - usar css en javascript

Configuración de Javascript de la imagen de fondo de un DIV a través de una función y un parámetro de función

Question

Tengo el siguiente 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>

y el siguiente Javascript:

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

El problema surge cuando intento configurar la imagen de fondo de las pestañas mediante una llamada a getElementByID. Ahora sé cómo crear una URL dinámica que usa el parámetro que se pasó, junto con otros valores codificados. En este caso, estamos intercambiando la imagen de fondo DESACTIVADA con la imagen de fondo ACTIVADA.

¿Cómo puedo hacer esto? ¿Hay alguna forma de usar una variable de javascript, asignarle la ruta completa y luego enviarla a la llamada como la ruta de la imagen de fondo?

Answer 1

Necesitas concatenar tu cadena.

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

De la forma en que lo tenías, solo está haciendo una cadena larga y en realidad no interpreta imagePrefix.

Incluso sugeriría crear la cadena separada:

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

Como lo menciona David Thomas a continuación, puede deshacerse de las comillas dobles en su cadena. Aquí hay un pequeño artículo para tener una mejor idea de cómo se relacionan las cadenas y las comillas / comillas dobles: http://www.quirksmode.org/js/strings.html

Answer 2

Por lo que sé, la sintaxis correcta es:

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

Básicamente, getElementById(tabName).backgroundImage y divide la cadena como:

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