div的style属性问题
0
[已解决问题]
解决于 2013-11-12 21:19
以下代码为什么只能在IE10的兼容模式下才能正常运行，IE7、8、9和其他浏览器都不能正常运行（实现div块的移动），感觉好像其他浏览器不能识别div1.style.left属性，具体是什么原因不清楚啊
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> body{background-color:aliceblue;} div{ font-size:larger; color:white; border:solid; border-color:aqua; } .pos1{ position:absolute; top:50px; left:10px; background-color:blue; } .pos2{ position:absolute; top:100px; left:10px; background-color:teal; } .pos3{ position:absolute; top:150px; left:10px; background-color:darkblue; } </style>
<script type="text/javascript"> var div1, div2, div3; window.onload = function(){ div1 = document.getElementById("first"); div2 = document.getElementById("second"); div3 = document.getElementById("third"); } function startPosition() { div1.style.top = 10; div1.style.left = 10; div2.style.top = 100; div2.style.left = 10; div3.style.top = 150; div3.style.left = 10; } function movePosition() { div1.style.top = 10; div1.style.left = 150; div2.style.top = 100; div2.style.left = 100; div3.style.top = 150; div3.style.left = 50; } function change() { document.body.style.backgroundColor = "red"; } </script> </head>
<body id="bdy">
<form> <input type="button" value="move text" onclick="movePosition()" /> <input type="button" value="put it back" onclick="startPosition()" /> <input type="button" value="change" onclick="change()" /> </form> <div id="first" class="pos1">one</div> <div id="second" class="pos2">second</div> <div id="third" class="pos3">third</div> </body> </html>
最佳答案
0
应该这样赋值 div1.style.top = "10px";
奖励园豆：5
谢谢了，后来发现确实只有这样赋值才能解决问题。
其他回答(3)
0
晕，先整理好吧
小菜鸟一枚，不知道怎么整理，正在学习。。
0
ie兼容模式很蛋疼的。
不知道ie的这几个模式有什么区别
0
IE对CSS3的支持一直都不好
原来如此，这个小菜真的不了解，刚刚开始学。