js小计（1）

SpiritLing

发布于 2023-01-05 09:15:26

9740

发布于 2023-01-05 09:15:26

文章被收录于专栏：SpiritLing

一：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 })