js小计（1）

一：js计算页面距离

offset：

用来计算元素距页面边缘距离，不考虑嵌套问题

  1. 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>

     

  2. 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 }

     

  3. 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 })

     

  4. 页面样子：

　　　　

　　5. chrome控制台输出

　　　　

 

　　综合说明：

　　offset 只计算position+margin两者之和距离，padding距离不属于其中

posted @ 2017-04-10 20:11  SpiritLing  阅读(194)  评论(0)  编辑  收藏  举报