jquery如何設(shè)置元素的位置

發(fā)布時(shí)間：2022-05-27 15:16:25 來(lái)源：億速云閱讀：628 作者：iii 欄目：web開(kāi)發(fā)

本文小編為大家詳細(xì)介紹“jquery如何設(shè)置元素的位置”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“jquery如何設(shè)置元素的位置”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

設(shè)置方法：1、用offset()設(shè)置元素相對(duì)于文檔的偏移坐標(biāo)，語(yǔ)法“元素對(duì)象.offset({top:偏移值,left:偏移值})”；2、用scrollTop()設(shè)置元素垂直滾動(dòng)條位置；3、用scrollLeft()設(shè)置元素水平滾動(dòng)條位置。

本教程操作環(huán)境：windows7系統(tǒng)、jquery1.10.2版本、Dell G3電腦。

jquery設(shè)置元素位置的多種方法

1、使用offset()

offset() 方法可設(shè)置被選元素相對(duì)于文檔的偏移坐標(biāo)。

$(selector).offset({top:value,left:value})

規(guī)定以像素為單位的 top 和 left 坐標(biāo)。

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<style>
			p {
				width:150px;
				background-color:pink;
				padding: 5px;
			}
		</style>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("p").offset({
						top: 200,
						left: 200
					});
				});
			});
		</script>
	</head>
	<body>

		<p>這是一個(gè)段落。</p>
		<button>設(shè)置P元素的偏移坐標(biāo)</button>

	</body>
</html>

jquery如何設(shè)置元素的位置

2、使用scrollTop()

scrollTop() 方法可設(shè)置被選元素的垂直滾動(dòng)條位置。

$(selector).scrollTop(position)

提示：當(dāng)滾動(dòng)條位于最頂部時(shí)，位置是 0。

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollTop(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
			This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
			This is some text. This is some text. This is some text.
		</div><br>
		<button>垂直滾動(dòng)條的位置設(shè)置為100px</button>

	</body>
</html>

jquery如何設(shè)置元素的位置

3、使用使用scrollLeft()

scrollLeft() 可以設(shè)置匹配元素相對(duì)滾動(dòng)條左側(cè)的偏移，即水平滾動(dòng)條的位置。

$(selector).scrollLeft(position)

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

示例：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").scrollLeft(100);
				});
			});
		</script>
	</head>
	<body>

		<div style="border:1px solid black;width:100px;height:130px;overflow:auto">
			The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
		</div><br>
		<button>水平滾動(dòng)條的位置設(shè)置為100 px</button>

	</body>
</html>

jquery如何設(shè)置元素的位置

讀到這里，這篇“jquery如何設(shè)置元素的位置”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

jquery如何設(shè)置元素的位置

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽