반응형
Notice
Recent Posts
Recent Comments
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- dunk high
- sacai
- 덩크 로우
- 리액트
- Dunk Low
- 자바스크립트
- stockx.com
- 드로우
- JavaScript
- 덩크로우
- react
- Linux
- 파이썬
- 오라클
- 주식
- 덩크 하이
- Nike
- 발매예정
- dunklow
- 나이키
- Python
- 제이쿼리
- oracle
- 리눅스
- 주식공부
- 코로나19
- GIT
- Github
- jQuery
- draw
Archives
- Today
- Total
Life goes slowly...
[jQuery] 제이쿼리 요소의 좌표, 위치 조작하기 본문
728x90
반응형
설명 | Method | 기능 |
.offset() |
읽기/쓰기 |
선택된 요소의 좌표를 가져오거나 특정 좌표로 이동 |
.offsetParent() |
읽기 전용 |
Dom 트리에 존재하는 부모 요소들 중 위치 요소를 기준으로 가장 가까운 요소를 선택 |
.position() |
읽기 전용 |
부모 요소의 위치를 기준으로 값을 얻는 상대 좌표를 사용하는 방법 |
.scrollLeft() |
읽기/쓰기 |
선택된 요소의 가로 스크롤 값을 반환하거나 값을 지정 |
.scrollTop() |
읽기/쓰기 |
선택된 요소의 세로 스크롤 값을 반환하거나 값을 지정 |
.offset() 함수
.offset( coordinates )
<html lang="en">
<head>
<meta charset="utf-8">
<title>offset demo</title>
<style>
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<p>Hello</p><p>2nd Paragraph</p>
<script>
var p = $( "p" ).last();
var offset = p.offset();
p.html( "left: " + offset.left + ", top: " + offset.top );
</script>
</body>
</html>
Hello
left: 10, top: 50
.offsetParent() 함수
.offsetParent( coordinates )
<html lang="en">
<head>
<meta charset="utf-8">
<title>offsetParent demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<ul class="level-1">
<li class="item-i">I</li>
<li class="item-ii" style="position: relative;">II
<ul class="level-2">
<li class="item-a">A</li>
<li class="item-b">B
<ul class="level-3">
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
</ul>
</li>
<li class="item-c">C</li>
</ul>
</li>
<li class="item-iii">III</li>
</ul>
<script>$( "li.item-a" ).offsetParent().css( "background-color", "red" );</script>
</body>
</html>
.position() 함수
.position( coordinates )
<html lang="en">
<head>
<meta charset="utf-8">
<title>position demo</title>
<style>
div {
padding: 15px;
}
p {
margin-left: 10px;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div>
<p>Hello</p>
</div>
<p></p>
<script>
var p = $( "p" ).first();
var position = p.position();
$( "p" ).last().text( "left: " + position.left + ", top: " + position.top );
</script>
</body>
</html>
Hello
left: 15, top: 15
.scrollLeft() 함수
$(element).scrollLeft(value)
<div class="test" style="width:200px; overflow-x: scroll;">
<div style="width:1000px;font-size: 20px;">Hello World ~~~!!!!</div>
</div>
<button onclick="moveScrollLeft()">Left +100</button>
<script>
//버튼 클릭시 100 의 값만큼 스크롤 이동
moveScrollLeft = function() {
var _scrollX = $('.test').scrollLeft();
$('.test').scrollLeft(_scrollX + 100);
};
</script>
.scrollTop() 함수
$(element).scrollTop(value)
<div class="test" style="width:200px; height:200px; overflow: auto;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean nec mollis nulla.
Phasellus lacinia tempus mauris eu laoreet. Proin gravida velit dictum dui consequat malesuada.
Aenean et nibh eu purus scelerisque aliquet nec non justo. Aliquam vitae aliquet ipsum.
Etiam condimentum varius purus ut ultricies. Mauris id odio pretium, sollicitudin sapien eget,
adipiscing risus.
</p>
</div>
<button onclick="moveScrollLeft()">Left +100</button>
<script>
//버튼 클릭시 10 의 값만큼 스크롤 이동
moveScrollLeft = function() {
var _scrollX = $('.test').scrollTop();
$('.test').scrollTop(_scrollX + 10);
};
</script>
728x90
반응형
'프로그래밍 > Javascript' 카테고리의 다른 글
[jQuery] 제이쿼리(jQuery) 클래스 추가하기 - addClass() 함수 (0) | 2020.11.02 |
---|---|
[jQuery] 자바스크립트 이벤트 등록 함수 - bind(), on(), live() 함수 (0) | 2020.11.01 |
[jQuery] 속성값 제거하기 - .removeAttr() (0) | 2020.10.29 |
[jQuery] 속성 값 가져오거나 제어하기 - .attr() (0) | 2020.10.29 |
[jQuery] 제이쿼리 요소의 조작 (추가, 복사 및 삭제) (0) | 2020.10.28 |
[JS] 자바스크립트 페이지 이동함수 - location.href / location.replace/ location.assign (0) | 2020.10.11 |
[JS] 자바스크립트 대화상자창 - Alert, Confirm, Prompt (0) | 2020.10.11 |
[Js] 자바스크립트의 유효범위 - Hoisting(호이스팅) (0) | 2020.10.08 |
Comments