Existe-t-il un moyen d'insérer dynamiquement un élément HTML positionné de manière compatible avec IE?

Question

Voici mon code JavaScript:

function BuildObject(container, index, imgFile, left, top, width, height) 
{ 
    var newImg = document.createElement('img'); 
    newImg.setAttribute("id","d" + index); 
    newImg.setAttribute("src", imgFile); 
    newImg.setAttribute("style", "position:absolute; left:" + left + "px; top:" + top + "px"); 
    newImg.setAttribute("width", width); 
    newImg.setAttribute("height", height); 
    container.insertBefore(newImg, container.firstChild); 
} 

BuildObject(document.body, 1, "pixel.gif", 100, 100, 1, 1); 

Dans Google Chrome, cela génère le code suivant comme premier élément dans le corps:

<img id="1" src="pixel.gif" style="position:absolute; left:100; top:100; " width="1" height="1"> 

Cela fonctionne comme prévu dans Google Chrome, mais pas dans IE . Dans IE, il crée l'élément, mais place chaque élément relativement dans le coin supérieur gauche, l'un à côté de l'autre. Si je crée les balises manuellement en HTML, IE les positionne correctement, mais pas si je le fais avec JavaScript.

Des idées sur la façon dont je peux le faire dynamiquement pour qu'il fonctionne dans IE?

Answer 1

Au lieu de définir l'attribut "style" comme ça, faites ceci:

newImg.style.position = 'absolute'; 
newImg.style.left = left + 'px'; 

etc. En général utilisant setAttribute() comme ce n'est pas vraiment correct. Définissez les propriétés directement sur l'objet DOM, sauf si vous utilisez des attributs non standard ajoutés au balisage HTML.