jqueryで要素の位置を設定する方法-フロントエンドQ&A-php.cn

jqueryで要素の位置を設定する方法

青灯夜游

リリース： 2022-05-26 14:25:37

オリジナル

2501 人が閲覧しました

設定方法: 1. offset() を使用して、ドキュメントに対する要素のオフセット座標を設定します。構文は、「要素オブジェクト.offset({上: オフセット値, 左: オフセット値})」です。 ; 2. 要素の垂直スクロールバーの位置を設定するには、scrollTop() を使用します; 3. 要素の水平スクロールバーの位置を設定するには、scrollLeft() を使用します。

jqueryで要素の位置を設定する方法

このチュートリアルの動作環境: Windows7 システム、jquery1.10.2 バージョン、Dell G3 コンピューター。

#jquery で要素の位置を設定するさまざまな方法

1. offset() を使用します

offset() メソッドは、ドキュメントに対する選択された要素のオフセット座標を設定します。

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

ログイン後にコピー

上と左の座標をピクセル単位で指定します。

例:

<!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>这是一个段落。</p>
		<button>设置P元素的偏移坐标</button>

	</body>
</html>

ログイン後にコピー

jqueryで要素の位置を設定する方法

2.scrollTop()を使用します

scrollTop( ) メソッドは、選択した要素の垂直スクロールバーの位置を設定します。

$(selector).scrollTop(position)

ログイン後にコピー

ヒント: スクロールバーが上部にある場合、位置は 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>垂直滚动条的位置设置为100px</button>

	</body>
</html>

ログイン後にコピー

jqueryで要素の位置を設定する方法

3.scrollLeft()

scrollLeft() を使用します。スクロールバーの左側を基準とした一致する要素のオフセット、つまり水平スクロールバーの位置。

$(selector).scrollLeft(position)

ログイン後にコピー

スクロールバーの水平位置は、左側からスクロールされるピクセル数を指します。スクロールバーが左端にあるときの位置は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>水平滚动条的位置设置为100 px</button>

	</body>
</html>

ログイン後にコピー

jqueryで要素の位置を設定する方法