Problème avec modification de la propriété backgroundImage

Question

J'ai un élément sur une page avec l'image d'arrière-plan définie à l'aide css:

// CSS snippet 
.mystyle { 
    background-image: url(some_image.gif); 
    // and other styles like width, height, padding, text-align, etc. 
} 

// HTML snippet 
<input type="button" name="mybutton" id="b1" class="mystyle" onclick=" 
some_function();" value="Apply"> 

En fonction Javascript, je suis en train de faire ce qui suit:

newImage = "url(new_image.gif)"; 
document.getElementById("b1").style.backgroundImage = newImage; 

Cela ne fonctionne pas et l'ancienne image d'arrière-plan disparaît.

De plus, quand je vérifie (à l'aide des alertes) ce que la propriété backgroundImage a été mis à avant et après avoir changé:

newImage = "url(new_image.gif)"; 
alert(document.getElementById("b1").style.backgroundImage); 
document.getElementById("b1").style.backgroundImage = newImage; 
alert(document.getElementById("b1").style.backgroundImage); 

La première alerte montre vide (chaîne vide) et la seconde alerte montre la newImage url.

Donc, il se passe vraiment quelque chose d'étrange ici. Je ne suis pas sûr de quoi. Quelqu'un peut-il aider?

EDIT: Cependant, si je change que l'attribut backgroundColor et définissez les backgroundImage « none », le changement semble fonctionner très bien (sens, le backgroundImage disparaît comme avant et je peux voir la nouvelle backgroundColor .

Answer 1

document.getElementById ("b1") .style.backgroundImage = newImage;

Lorsque Si vous définissez unvous définissez un backgroundImage à partir du script, l'URL est par rapport à l'URL de la page.à partir d'une feuille de style externe, l'URL est relative à la feuille de style. La différence peut amener votre chemin relatif à pointer vers le mauvais endroit. Si vous voulez être certain, utilisez des URL enracinées.

La première alerte montre vide (chaîne vide)

qui est prévu. La propriété style reflète uniquement le contenu de l'attribut en ligne style="..." d'un élément, et non les styles appliqués indirectement via des règles de feuille de style. Vous pouvez obtenir cette information moins fiable en regardant element.currentStyle dans IE ou window.getComputedStyle dans d'autres navigateurs. Ou, mieux, utilisez Firebug ou l'inspecteur DOM dans Firefox pour déboguer les règles qui sont appliquées.

Answer 2

Ok,

La première alerte qui semblait vide était parce qu'apparemment (dans IE) que je dois faire:

alert(document.getElementById(buttonMainId).currentStyle.backgroundImage); 

Pour changer l'image d'arrière-plan, je dois construire l'URL complète (http://blah/image.gif) pour que cela prenne effet.