提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

js小计（1）

2023-02-19 12:22:21 时间

一：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>
  1. 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 }
  1. 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 })
  1. 页面样子：

　　5. chrome控制台输出

综合说明：

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

相关文章