2009-02-08 5 views
0

Le code suivant montre ce que je m'attends à Firefox et Chrome: un petit carré blanc dans un grand rectangle vert. Je ne vois pas le petit carré dans IE7. Comment puis-je le faire apparaître?affichant un div javascript généré dans IE7

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Insert title here</title> 
<script type="text/javascript"> 
<!-- 
function start() 
{ 
    var g_Div = document.getElementById("bigdiv"); 
    var littleDiv = document.createElement('div'); 
    littleDiv.setAttribute('style', 
     'position:absolute;'+ 
     'left:300px;'+ 
     'top:300px;'+ 
     'width:5px;'+ 
     'height:5px;'+ 
     'clip:rect(0pt,5px,5px,0pt);'+ 
     'background-color: rgb(255, 255, 255);'); 
    g_Div.appendChild(littleDiv); 
} 
//--> 
</script> 
</head> 
<body> 
<div 
    id="bigdiv" 
    style="border: 1px solid ; margin: auto; height: 600px; width: 800px; background-color: green;" 
    > 
</div> 
<script type="text/javascript"> 
<!-- 
start(); 
//--> 
</script> 
</body> 
</html> 

Répondre

4

Cela devrait faire ce que vous voulez, et devrait fonctionner sur les principaux navigateurs:

function start() 
{ 
    var g_Div = document.getElementById("bigdiv"); 
    var littleDiv = document.createElement('div'); 
    littleDiv.style.background = 'rgb(255, 255, 255)'; 
    littleDiv.style.width = '5px'; 
    littleDiv.style.height = '5px'; 
    littleDiv.style.left = '300px'; 
    littleDiv.style.top = '300px'; 
    littleDiv.style.position = 'absolute'; 
    g_Div.appendChild(littleDiv); 
} 
+0

Works great !! (sauf la bordure noire que je ne veux pas, mais facile à enlever) – Fabien

+0

Ha, oups. J'ai laissé ça là-dedans en testant ça. Enlever de cette réponse. – Tom

2

Utilisez cette approche pour changer le style de l'élément: -

littleDiv.style.cssText = 'position:absolute;'+ 
    'left:300px;'+ 
    'top:300px;'+ 
    'width:5px;'+ 
    'height:5px;'+ 
    'clip:rect(0pt,5px,5px,0pt);'+ 
    'background-color: rgb(255, 255, 255)'; 
1

setAttribute est- assez inutile surtout en ce qui concerne l'attribut de style.
Vous pourriez avoir à utiliser une classe ou element.style. "PropertyName"

quirksmode compatibility chart