js小计（1）
一：js计算页面距离
offset：
用来计算元素距页面边缘距离，不考虑嵌套问题
- html代码：
1 <body> 2 <div class="top"> 3 <div class="con"> 4 5 </div> 6 </div> 7 <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> 8 </body>
- css代码：
1 //清除自带的距离，防止干扰 2 * { 3 padding: 0px; 4 margin: 0px; 5 } 6 .top { 7 width: 800px; 8 height: 800px; 9 position: absolute; 10 left: 20px; 11 top: 20px; 12 background-color: #00B7FF; 13 margin: 5px; 14 padding: 3px; 15 } 16 .top .con { 17 width: 50px; 18 height: 50px; 19 position: absolute; 20 left: 20px; 21 top: 20px; 22 background-color: red; 23 margin: 5px; 24 padding: 3px; 25 }
- js代码(使用jquery)：
1 $(document).ready(function(){ 2 var a=$(".top").offset().top; 3 var b=$(".con").offset().top; 4 console.log(a); 5 console.log(b); 6 })
- 页面样子：
5. chrome控制台输出
综合说明：
offset 只计算position+margin两者之和距离，padding距离不属于其中
