2009-02-08 3 views
0

Следующий код показывает, что я ожидаю в Firefox и Chrome: маленький белый квадрат в большом зеленом прямоугольнике. Я не вижу маленький квадрат в IE7. Как это сделать?сгенерированный javascript div в 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> 

ответ

4

Это должно делать то, что вы хотите, и должны работать через основные браузеры:

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

прекрасно работает !! (за исключением черной границы, которую я не хочу, но легко удалить) – Fabien

+0

Ха, упс. Я оставил это там, когда тестировал это. Удалив его из этого ответа. – Tom

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

SetAttribute является довольно бесполезно, особенно для атрибута стиля.
Вы, возможно, придется использовать класс или element.style. "ИмениСвойства"

quirksmode compatibility chart

Смежные вопросы