在IE7中显示javascript生成的div

下面的代码显示了我在Firefox和Chrome中所期望的内容：一个绿色的大矩形中的一个小白色正方形。我没有看到IE7中的小方块。我如何让它出现？在IE7中显示javascript生成的div

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

来源

2009-02-08 Fabien

这应该做你想做的，并应在整个主流浏览器工作：

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); 
}

来源

2009-02-08 14:43:17 Tom

伟大的作品！（除了我不想要的黑色边框，但容易删除） – Fabien 2009-02-08 14:52:26

使用这种方法来改变元素的风格： -

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)';

来源

2009-02-08 14:48:31 AnthonyWJones

的setAttribute是在ie中很没用，特别是对于style属性。
您可能需要使用一类或element.style。 “PROPERTYNAME”

quirksmode compatibility chart

来源

2009-02-08 14:50:22 meouw

在IE7中显示javascript生成的div

回答

相关问题