offsetTop测试见解
生活随笔
收集整理的這篇文章主要介紹了
offsetTop测试见解
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
offsetTop一開始以為只要容器內div的top定位為負就行，結果今天剛做了個demo，發現好像不是那么回事，于是經過各種測試，得出了一些結論，結論看demo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /><title></title> <style> #aa{width:200px;height:200px;overflow:hidden;float:left;border:2px solid #00f;} #bb{width:200px;height:200px;float:left;margin-left:100px;border:2px solid #00f;} #cc{width:200px;height:200px;float:left;margin-left:100px;border:2px solid #00f;position:relative;} #aaa, #bbb{width:200px;height:500px;background:red;} #ccc{width:200px;height:500px;background:red;position:absolute;top:-200px;} </style> </head> <body> <div id="aa"><div id="aaa">1 <br />2 <br />3 <br />4 <br />5 <br />6 <br />7 <br />8 <br />9 <br />10 <br />11 <br />12 <br />我是aaa</div> </div> <div id="bb"><div id="bbb">1 <br />2 <br />3 <br />4 <br />5 <br />6 <br />7 <br />8 <br />9 <br />10 <br />11 <br />12 <br />我是bbb</div> </div> <div id="cc"><div id="ccc">1 <br />2 <br />3 <br />4 <br />5 <br />6 <br />7 <br />8 <br />9 <br />10 <br />11 <br />12 <br />我是ccc</div> </div> <input type="button" value="看看ccc的scrollTop" onclick="ccc()" /> </body> <script> window.onload = function () {var oDiv = document.getElementById("aa");var oDiv2 = document.getElementById("bb");oDiv.scrollTop = 100;oDiv2.scrollTop = 100; } function ccc() {var oDiv = document.getElementById("ccc");alert(oDiv.scrollTop); } </script> </html>事實證明，實驗才出真理啊，老看書面上的木有用，理解不了它的實際意義
轉載于:https://www.cnblogs.com/qiangspecial/archive/2013/05/06/3063840.html
總結
以上是生活随笔為你收集整理的offsetTop测试见解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： python之路---03 整型 boo
- 下一篇： linux学习五