<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12_offset和position</title>
</head>
<style type="text/css">
* {
margin: 0px;
}
.div1 {
position: absolute;
width: 200px;
height: 200px;
top: 20px;
left: 10px;
background: blue;
}
.div2 {
position: absolute;
width: 100px;
height: 100px;
top: 50px;
background: red;
}
.div3 {
position: absolute;
top: 250px;
}
</style>
<body style="height: 2000px;">
<div class="div1">
<div class="div2">測(cè)試offset</div>
</div>
<div class='div3'>
<button id="btn1">讀取offset和position</button>
<button id="btn2">設(shè)置offset</button>
</div>
<!--
獲取/設(shè)置標(biāo)簽的位置數(shù)據(jù)
* offset(): 相對(duì)頁(yè)面左上角的坐標(biāo)
* position(): 相對(duì)于父元素左上角的坐標(biāo)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
/*
需求:
1. 點(diǎn)擊 btn1
打印 div1 相對(duì)于頁(yè)面左上角的位置
打印 div2 相對(duì)于頁(yè)面左上角的位置
打印 div1 相對(duì)于父元素左上角的位置
打印 div2 相對(duì)于父元素左上角的位置
2. 點(diǎn)擊 btn2
設(shè)置 div2 相對(duì)于頁(yè)面的左上角的位置
*/
$('#btn1').click(function () {
// 打印 div1 相對(duì)于頁(yè)面左上角的位置
var offset = $('.div1').offset()
console.log(offset.left, offset.top) // 10 20
// 打印 div2 相對(duì)于頁(yè)面左上角的位置
offset = $('.div2').offset()
console.log(offset.left, offset.top) // 10 70
// 打印 div1 相對(duì)于父元素左上角的位置
var position = $('.div1').position()
console.log(position.left, position.top) // 10 20
// 打印 div2 相對(duì)于父元素左上角的位置
position = $('.div2').position()
console.log(position.left, position.top) // 0 50
})
$('#btn2').click(function () {
$('.div2').offset({
left: 50,
top: 100
})
})
</script>
</body>
</html>
12_offset和position
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。
相關(guān)閱讀更多精彩內(nèi)容
- 1.定位的定義 static(靜態(tài)) 沒(méi)有特別的設(shè)定，遵循基本的定位規(guī)定，不能通過(guò)z-index進(jìn)行層次分級(jí)。 r...
- w3school過(guò)了HTML的知識(shí)之后，覺(jué)得要自己?jiǎn)渭兊厝タ兄R(shí)點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)...
- 首先我們要了解樣式中的這兩種定位； absolute（絕對(duì)定位）：將被賦予的對(duì)象從文檔流中拖出，使用left，ri...
- 一絲一絲的回想，樁樁件件，不知道是哪一步錯(cuò)了，造就現(xiàn)的自己，對(duì)什么人什么事都不敢全信，懷著一份戒心，小心翼翼的擔(dān)心...
