Question

以下代码显示了我对Firefox和Chrome的期望：一个绿色长方形的小白色方块。我没有看到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>

Answer 1

这应该做你想要的，并且应该适用于主要的浏览器：

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

Answer 2

使用此方法更改元素上的样式： -

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

Answer 3

setAttribute非常无用，尤其是对于style属性您可能必须使用class或element.style。“propertyName”

quirksmode compatibility chart

在IE7中显示javascript生成的div

3 个答案: