<!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縱向滾動(dòng)條滾動(dòng)的距離? ? ? ? ? document.getElementById("li4").innerHTML = (div.scrollLeft)+"px";//div1橫向滾動(dòng)條滾動(dòng)的距離? ? ?}</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:10px red solid;height:300px;width:200px;overflow:auto">? ? ? ? ? ? ? ? <div style="height:500px;width:400px">請(qǐng)調(diào)整橫豎滾動(dòng)條后，點(diǎn)擊按鈕后查看offsetTop、offsetLeft、scrollTop、scrollLeft值。</div>? ? ? ? ? ? </div>? ? ? ? ? ? <input type="button" value="點(diǎn)擊我!" 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;">結(jié)果：? ? ? ? ? ? <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>
offsetTop為什么是16，不應(yīng)該是15嗎？求解答
慕粉0943041209
2017-05-03 20:44:20
