Bagaimana untuk menetapkan kedudukan elemen dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menetapkan kedudukan elemen dalam jquery

青灯夜游

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

asal

2463 orang telah melayarinya

Kaedah tetapan: 1. Gunakan offset() untuk menetapkan koordinat offset bagi elemen berbanding dokumen, sintaksnya ialah "elemen object.offset({top: offset value, left: offset value})" ; 2. Gunakan scrollTop() untuk menetapkan kedudukan bar skrol menegak bagi elemen;

Bagaimana untuk menetapkan kedudukan elemen dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

Banyak cara untuk menetapkan kedudukan elemen dalam jquery

1. Gunakan offset()

Kaedah offset() menetapkan koordinat offset bagi elemen yang dipilih berbanding dengan dokumen.

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

Salin selepas log masuk

Menentukan koordinat atas dan kiri dalam piksel.

Contoh:

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

Salin selepas log masuk

Bagaimana untuk menetapkan kedudukan elemen dalam jquery

2. Gunakan scrollTop()

Kaedah scrollTop() menetapkan kedudukan bar skrol menegak bagi elemen yang dipilih.

$(selector).scrollTop(position)

Salin selepas log masuk

Petua: Apabila bar skrol berada di bahagian atas, kedudukannya ialah 0.

Contoh:

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

Salin selepas log masuk

Bagaimana untuk menetapkan kedudukan elemen dalam jquery

3. Gunakan scrollLeft()

scrollLeft( ) boleh menetapkan offset elemen padanan berbanding sebelah kiri bar skrol, iaitu, kedudukan bar skrol mendatar.

$(selector).scrollLeft(position)

Salin selepas log masuk

Kedudukan mendatar bar skrol merujuk kepada bilangan piksel yang ditatal dari sebelah kirinya. Apabila bar skrol berada di hujung kiri, kedudukannya ialah 0.

Contoh:

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

Salin selepas log masuk

Bagaimana untuk menetapkan kedudukan elemen dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kedudukan elemen dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!