jquery에서 요소의 위치를 설정하는 방법-프런트엔드 Q&A-php.cn

jquery에서 요소의 위치를 설정하는 방법

青灯夜游

풀어 주다： 2022-05-26 14:25:37

원래의

2503명이 탐색했습니다.

설정 방법: 1. 문서를 기준으로 요소의 오프셋 좌표를 설정하려면 offset()을 사용합니다. 구문은 "element object.offset({top: 오프셋 값, 왼쪽: 오프셋 값})"입니다. 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에서 요소의 위치를 설정하는 방법