jquery獲取div距離窗口和父級(jí)dv的距離示例

2019-11-20 21:54:44

字體：大中小

供稿：網(wǎng)友

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

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

復(fù)制代碼代碼如下:

 
*{ 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:

復(fù)制代碼代碼如下:

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

js:

復(fù)制代碼代碼如下:

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

這里的280px= a.height/200px + parentBox.padding-top/30px + parentBox.margin-top/40px + innerBox.margin-top/10px;
//如果這邊parentBox設(shè)置position： relative； innerBox設(shè)置position：absolute；并且innerBox設(shè)置了top： 40px；
//此時(shí)_offsetTop的值為290px = a.height/200px + parentBox.margin-top/40px + innerBox.margin-top/10px + ineBox.top/40px;
//因?yàn)榻^對(duì)定義是以父級(jí)div的左上角的內(nèi)邊框?yàn)閰⒖甲鴺?biāo)的。
//如果innerBox設(shè)置了邊框的話還要加上邊框的值

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

復(fù)制代碼代碼如下:

 
*{ 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:

復(fù)制代碼代碼如下:

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

js:

復(fù)制代碼代碼如下:

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

上一篇：js切換光標(biāo)示例代碼

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

學(xué)習(xí)交流

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)

索泰發(fā)布一款GTX 1070 Mini迷你版本:小機(jī)箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關(guān)注

麻豆小视频在线观看_中文黄色一级片_久久久成人精品_成片免费观看视频大全_午夜精品久久久久久久99热浪潮_成人一区二区三区四区

jquery獲取div距離窗口和父級(jí)dv的距離示例