jquery獲取div距離窗口和父級dv的距離示例

2019-11-20 21:54:44

字體：大中小

來源：轉載

供稿：網友

jquery中jquery.offset().top / left用于獲取div距離窗口的距離，jquery.position().top / left 用于獲取距離父級div的距離（必須是絕對定位的div）。

（1）先介紹jquery.offset().top / left
css：

復制代碼代碼如下:

 
*{ margin: 0px; padding: 0px; } 
div{ margin: 0px auto; } 
.a{ width: 960px; height: 200px; } 
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; } 
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; } 

html:

復制代碼代碼如下:

 
<body> 
<div class="a"> a<div> 
<div class="parentBox"> 
<div class="innerBox">innerBox</div> 
</div> 
</body> 

js:

復制代碼代碼如下:

 
$(function(){ 
var_offsetTop = $(".innerBox").offset().top; //280px 
}) 

這里的280px= a.height/200px + parentBox.padding-top/30px + parentBox.margin-top/40px + innerBox.margin-top/10px;
//如果這邊parentBox設置position： relative； innerBox設置position：absolute；并且innerBox設置了top： 40px；
//此時_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因為絕對定義是以父級div的左上角的內邊框為參考坐標的。
//如果innerBox設置了邊框的話還要加上邊框的值

（2）jqury.position().top /left用于獲取子div距離父級div的距離，并且子div必須是絕對定位
css：

復制代碼代碼如下:

 
*{ margin: 0px; padding: 0px; } 
div{ margin: 0px auto; } 
.a{ width: 960px; height: 200px; } 
.parentBox{ padding: 30px; margin-top: 40px; width: 960px; height: 300px; position: relative; } 
.innerBox{ padding: 20px; margin-top: 10px; width: 400px; height: 100px; position: absolute; } 

html:

復制代碼代碼如下:

 
<body> 
<div class="a"> a<div> 
<div class="parentBox"> 
<div class="innerBox">innerBox</div> 
</div> 
</body> 

js:

復制代碼代碼如下:

 
$(function(){ 
var_offsetTop = $(".innerBox").offset().top; //280px 
}) 

上一篇：js切換光標示例代碼

下一篇：jquery中常用的SET和GET$(”#msg”).html循環介紹

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

jquery獲取div距離窗口和父級dv的距離示例