使用js对div的style属性进行动态赋值问题，
以下代码为什么只能在IE10的兼容模式下才能正常运行，IE7、8、9和其他浏览器都不能正常运行（实现div块的移动），感觉好像其他浏览器不能识别div1.style.le...
以下代码为什么只能在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> 展开
<!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> 展开
2个回答
展开全部
//那是因为对于标签内嵌的style=""样式css，才可以通过 div1.style.XX这种方式获取，对于外部引入或写在<style></style>的css，可以试下通过下面的方式获取;
<script type="text/javascript">
function getCss(elem , prop){
if(window.addEventListener){
var computedStyle = document.defaultView.getComputedStyle(elem, null);
return computedStyle[prop];
}else if(window.attachEvent){
return document.getElementById("sty").currentStyle[prop];
}
}
var myDIV = document.getElementById(id) ;
//getCss(myDIV , "top");
</script>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
function startPosition()
{
div1.style.top = '10px';
div1.style.left = '10px';
div2.style.top = '100px';
div2.style.left = '10px';
div3.style.top = '150px';
div3.style.left = '10px';
}
请加上px进行测试，ok？
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
