jquery에서 요소의 위치를 설정하는 방법
- 青灯夜游원래의
- 2022-05-26 14:25:372441검색
설정 방법: 1. 문서를 기준으로 요소의 오프셋 좌표를 설정하려면 offset()을 사용합니다. 구문은 "element object.offset({top: 오프셋 값, 왼쪽: 오프셋 값})"입니다. 2. 사용 scrollTop() 요소의 수직 스크롤 막대 위치를 설정합니다. 3. scrollLeft()를 사용하여 요소의 수평 스크롤 막대 위치를 설정합니다.
이 튜토리얼의 운영 환경: 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>
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>
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 동영상 튜토리얼, 웹 프론트엔드 동영상】
위 내용은 jquery에서 요소의 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!