當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

018_位置和偏移

發(fā)布時(shí)間：2025/4/17 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了 018_位置和偏移小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. offset()方法

1.1. offset()方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移(位置)。

1.2. 返回偏移坐標(biāo)

1.2.1. offset()方法返回第一個(gè)匹配元素的偏移坐標(biāo)。

1.2.2. offset()方法返回的對(duì)象包含兩個(gè)整型屬性: top和left, 以像素計(jì)。此方法只對(duì)可見(jiàn)元素有效。

1.2.3. 語(yǔ)法

$(selector).offset()

1.3. 設(shè)置偏移坐標(biāo)

1.3.1. offset(value)方法設(shè)置每個(gè)匹配元素的偏移坐標(biāo)。

1.3.2. 語(yǔ)法

$(selector).offset(value)

1.3.3. 參數(shù)

1.4. 使用函數(shù)來(lái)設(shè)置偏移坐標(biāo)

1.4.1. offset(function(index,oldoffset))使用函數(shù)來(lái)設(shè)置每一個(gè)匹配元素的偏移坐標(biāo)。

1.4.2. 語(yǔ)法

$(selector).offset(function(index,oldoffset))

1.4.3. 參數(shù)

1.5. 例子

1.5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>offset</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var x = $("p").offset();alert("p元素相對(duì)于文檔左偏移: " + x.left + " ,上偏移: " + x.top);});$('#btn2').click(function(){$("p:first").offset({left: 10, top: 10});});});</script><style type="text/css">* {margin: 0; padding: 0;}div {background-color: pink; margin: 10px; padding: 7px;}p {margin: 10px; padding: 7px;}</style></head><body><div><p style="background-color: red;">offset()方法返回或設(shè)置匹配元素相對(duì)于文檔的偏移(位置)。</p></div><div><p style="background-color: green;">offset()返回第一個(gè)匹配元素的偏移坐標(biāo)。</p></div><button id="btn1">文檔的偏移</button> <button id="btn2">設(shè)置偏移</button></body> </html>

1.5.2. 效果圖

2. position()方法

2.1. position()方法返回第一個(gè)匹配元素相對(duì)于父元素的位置(偏移)。

2.2. position()方法返回的對(duì)象包含兩個(gè)整型屬性: top和left, 以像素計(jì)。

2.3. 此方法只對(duì)可見(jiàn)元素有效。

2.4. 語(yǔ)法

$(selector).position()

2.5. 例子

2.5.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>position()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){var x = $("p").position();alert("相對(duì)于父元素左邊位置: " + x.left + " ,相對(duì)于父元素上邊位置: " + x.top);});$('#btn2').click(function(){var x = $("#div2 > p").position();alert("相對(duì)于父元素左邊位置: " + x.left + " ,相對(duì)于父元素上邊位置: " + x.top);});});</script><style type="text/css">* {margin: 0; padding: 0;}div {width: 600px;height: 200px;}#div1 {background: red;padding: 10px 20px;}#div2 {background: green;position: relative;}p {background: pink;width: 300px;height: 100px;}#div2 > p {position: absolute;top: 30px;left: 50px;}</style></head><body><div id="div1"><p>position()方法返回第一個(gè)匹配元素相對(duì)于父元素的位置(偏移)。</p></div><div id="div2"><p>position()方法返回的對(duì)象包含兩個(gè)整型屬性: top和left, 以像素計(jì)。</p></div><br /><button id="btn1">相對(duì)于父元素的位置</button> <button id="btn2">絕對(duì)定位相對(duì)于父元素的位置</button></body> </html>

2.5.2. 效果圖

3. scrollLeft()方法

3.1. scrollLeft()方法返回或設(shè)置匹配元素的滾動(dòng)條的水平位置。

3.2. 滾動(dòng)條的水平位置指的是從其左側(cè)滾動(dòng)過(guò)的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最左側(cè)時(shí), 位置是0。

3.3. 該方法對(duì)于可見(jiàn)元素和不可見(jiàn)元素均有效。

3.4. 返回水平滾動(dòng)條位置

3.4.1. scrollLeft()方法返回第一個(gè)匹配元素的水平滾動(dòng)條位置。

3.4.2. 語(yǔ)法

$(selector).scrollLeft()

3.5. 設(shè)置水平滾動(dòng)條位置

3.5.1. scrollLeft(position)方法設(shè)置每一個(gè)匹配元素的水平滾動(dòng)條位置。

3.5.2. 語(yǔ)法

$(selector).scrollLeft(position)

3.5.3. 參數(shù)

4. scrollTop()方法

4.1. scrollTop()方法返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。

4.2. 滾動(dòng)條的垂直位置指的是從其頂部滾動(dòng)過(guò)的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最頂部時(shí), 位置是0。

4.3. 該方法對(duì)于可見(jiàn)元素和不可見(jiàn)元素均有效。

4.4. 返回垂直滾動(dòng)條位置

4.4.1. scrollTop()方法返回第一個(gè)匹配元素的垂直滾動(dòng)條位置。

4.4.2. 語(yǔ)法

$(selector).scrollTop()

4.5. 設(shè)置垂直滾動(dòng)條位置

4.5.1. scrollTop(offset)方法設(shè)置每一個(gè)匹配元素的垂直滾動(dòng)條位置。

4.5.2. 語(yǔ)法

$(selector).scrollTop(offset)

4.5.3. 參數(shù)

4.6. 例子

4.6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>scrollLeft()和scrollTop()方法</title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(document).ready(function(){$('#btn1').click(function(){alert("第一個(gè)div左邊滾動(dòng)條的位置: " + $("div").scrollLeft() + " ,第一個(gè)div上邊滾動(dòng)條的位置: " + $("div").scrollTop());});$('#btn2').click(function(){$("div").scrollLeft(20);$("div").scrollTop(50);});});</script><style type="text/css">div {width: 200px;height: 200px;background: red;overflow: auto;}</style></head><body><div><p><h2>scrollLeft()方法</h2>1. scrollLeft()方法返回或設(shè)置匹配元素的滾動(dòng)條的水平位置。<br />2. 滾動(dòng)條的水平位置指的是從其左側(cè)滾動(dòng)過(guò)的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最左側(cè)時(shí), 位置是0。<h3>返回水平滾動(dòng)條位置</h3>1. scrollLeft()方法返回第一個(gè)匹配元素的水平滾動(dòng)條位置。<br />2. 語(yǔ)法<br />$(selector).scrollLeft()<h3>設(shè)置水平滾動(dòng)條位置</h3>1. scrollLeft(position)方法設(shè)置每一個(gè)匹配元素的水平滾動(dòng)條位置。<br />2. 語(yǔ)法<br />$(selector).scrollLeft(position)</p></div><div><p><h2>scrollTop()方法</h2>1. scrollTop()方法返回或設(shè)置匹配元素的滾動(dòng)條的垂直位置。<br />2. 滾動(dòng)條的垂直位置指的是從其頂部滾動(dòng)過(guò)的像素?cái)?shù)。當(dāng)滾動(dòng)條位于最頂部時(shí), 位置是0。<h3>返回垂直滾動(dòng)條位置</h3>1. scrollTop()方法返回第一個(gè)匹配元素的垂直滾動(dòng)條位置。<br />2. 語(yǔ)法<br />$(selector).scrollTop()<h3>設(shè)置垂直滾動(dòng)條位置</h3>1. scrollTop(offset)方法設(shè)置每一個(gè)匹配元素的垂直滾動(dòng)條位置。<br />2. 語(yǔ)法<br />$(selector).scrollTop(offset)</p></div><br /><button id="btn1">返回滾動(dòng)條的位置</button> <button id="btn2">設(shè)置滾動(dòng)條的位置</button></body> </html>

4.6.2. 效果圖

總結(jié)

以上是生活随笔為你收集整理的018_位置和偏移的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

位置