So legen Sie die Position eines Elements in jquery fest-Front-End-Fragen und Antworten-php.cn

So legen Sie die Position eines Elements in jquery fest

青灯夜游

Freigeben： 2022-05-26 14:25:37

Original

2503 Leute haben es durchsucht

Einstellungsmethode: 1. Verwenden Sie offset(), um die Versatzkoordinate des Elements relativ zum Dokument festzulegen. Die Syntax lautet „element object.offset({top: offset value, left: offset value})“ 2. Verwenden Sie scrollTop() Legt die vertikale Bildlaufleistenposition des Elements fest. 3. Verwenden Sie scrollLeft(), um die horizontale Bildlaufleistenposition des Elements festzulegen.

So legen Sie die Position eines Elements in jquery fest

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

Mehrere Möglichkeiten, die Position von Elementen in jquery festzulegen

1. Verwenden Sie die Methode offset()

offset(), um die Versatzkoordinaten des ausgewählten Elements relativ zum Dokument festzulegen.

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

Nach dem Login kopieren

Gibt die oberen und linken Koordinaten in Pixeln an.

Beispiel:

<!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>

Nach dem Login kopieren

So legen Sie die Position eines Elements in jquery fest

2. Verwenden Sie die Methode scrollTop()

scrollTop(), um die vertikale Bildlaufleistenposition des ausgewählten Elements festzulegen.

$(selector).scrollTop(position)

Nach dem Login kopieren

Tipp: Wenn sich die Bildlaufleiste oben befindet, ist die Position 0.

Beispiel:

<!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>

Nach dem Login kopieren

So legen Sie die Position eines Elements in jquery fest

3. Verwenden Sie scrollLeft()

scrollLeft(), um den Versatz des passenden Elements relativ zur linken Seite der Bildlaufleiste festzulegen, also die Position der Horizontalen Bildlaufleiste.

$(selector).scrollLeft(position)

Nach dem Login kopieren

Die horizontale Position einer Bildlaufleiste bezieht sich auf die Anzahl der Pixel, die von ihrer linken Seite aus gescrollt werden. Wenn sich die Bildlaufleiste ganz links befindet, ist die Position 0.

Beispiel:

<!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>

Nach dem Login kopieren

So legen Sie die Position eines Elements in jquery fest

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo legen Sie die Position eines Elements in jquery fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!