看里面的疑問：疑問：alert里面這樣用,第一次顯示不出left值,后面才可以，為什么？換成offsetLeft第一次就可以顯示出來
<!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>
2016-11-20
首先，要想第一次就顯示出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賦值。
2016-11-17
offsetLsft打印出來表示是當前div1的left值
而div1.style.left在js中只是作為我們要改變的屬性，所以第一次我們又沒有改變它，當然顯示不出任何值，只有當它有改變的時候才有值