<!DOCTYPE?HTML>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<script?type="text/javascript">
????function?req(){
??????????var?div?=?document.getElementById("div1");
??????????document.getElementById("li1").innerHTML?=?(div.offsetTop)+"px";//div1距離屏幕頂部的距離
??????????document.getElementById("li2").innerHTML?=?(div.offsetLeft)+"px";//div1距離屏幕左部的距離
??????????document.getElementById("li3").innerHTML?=?(div.scrollTop)+"px";//div1縱向滾動條滾動的距離
??????????document.getElementById("li4").innerHTML?=?(div.scrollLeft)+"px";//div1橫向滾動條滾動的距離
?????}
</script>
</head>
<body?style="border:10px?solid?#ccc;padding:0px?0px;margin:5px?10px">
????<div?style="width:60%;border-right:1px?dashed?red;float:left;">
????????<div?style="float:left;">
????????????<div?id="div1"?style="border:5px?red?solid;height:300px;width:200px;overflow:auto">
????????????????<div?style="height:500px;width:400px">請調整橫豎滾動條后，點擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>
????????????</div>
????????????<input?type="button"?value="點擊我!"?onclick="req()"?style="border:?1px?solid?purple;height:?25px;"/>
????????</div>
?????
????</div>
????<div?style="width:30%;float:left;">
????????<ul?style="list-style-type:?none;?line-height:30px;">結果：
????????????<li>offsetTop?:?<span?id="li1"></span></li>
????????????<li>offsetLeft?:?<span?id="li2"></span></li>
????????????<li>?scrollTop?:?<span?id="li3"></span></li>
????????????<li>scrollLeft?:?<span?id="li4"></span></li>
????????</ul>
????????
????</div>
????<div?style="clear:both;"></div>
</body>
</html>
為什么最后需要加一行<div style="clear:both;"></div>，可它不存在其他div中也不是父容器，要怎么理解
龍飛66
2016-05-27 13:13:52
