看里面的疑问：疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？换成offsetLeft第一次就可以显示出来
慕粉18221508921
2016-11-16 21:40
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice</title>
<style type="text/css">
*{margin:0px;padding:0px;}
#div1 {position:relative;left:-200px;width:200px;height:200px;margin-top:50px;background-color: pink;}
#share{background-color:lightblue;width:20px;height:50px;position: absolute;left:200px;top:75px;}
</style>
<script type="text/javascript">
window.onload=function(){
var div1=document.getElementById("div1");
div1.onmouseover=startMove; /*不加括号,就是正常的,鼠标滑过,开始移动,表示鼠标滑过,调用这个函数*/
/*div1.onmouseover=startMove();*/
/*加了括号之后,一打开就开始移动,表示,把函数执行的结果给div1的鼠标滑过事件,所以会去先执行函数,因为函数执行的结果就是offsetLeft==0,然后把这个结果给div1的鼠标滑过事件,所以会出现一打开就跑,这是为了得到函数执行的结果*/
};
function startMove(){
var div1=document.getElementById("div1");
var timer=setInterval(
function(){
if(div1.offsetLeft==0){clearInterval(timer)}//判断要计算,所以不能带'px',用offsetLeft
else {alert(div1.style.left);//offsetLeft显示无'px',style.left显示有'px'
//疑问：alert里面这样用,第一次显示不出left值,后面才可以，为什么？换成offsetLeft第一次就可以显示出来
div1.style.left=div1.offsetLeft+10+'px';//这个地方要+—,最好不带'px'
}}
,500);
}
</script>
</head>
<body>
<div id="div1">
<span id="share">分享</span>
</div>
</body>
</html>
2回答
-
- 幕布斯7328391
- 2016-11-20 17:12:05
首先，要想第一次就显示出style.left的值，必须在元素里设置style，如<div id="div1" style="position:relative;left:-200px;"> ，所以你的问题中第一次显示不出left值，是因为并没有在style中设置，而第一次alert之后你设置了div1.style.left，后面的alert(div1.style.left)都能输出值。
其次，弄明白left这些位置值都是我们赋予给它的，我们没在style中去设置，第一次自然显示不出来。而offesetLeft浏览器会根据元素位置自动给offsetLeft赋值。
-
- Lemon156
- 2016-11-17 09:42:11
offsetLsft打印出来表示是当前div1的left值
而div1.style.left在js中只是作为我们要改变的属性，所以第一次我们又没有改变它，当然显示不出任何值，只有当它有改变的时候才有值
JS动画效果
113925 学习 · 1443 问题
相似问题