반응형
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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 31
Tags more
Archives
Today
Total
관리 메뉴

Life goes slowly...

[jQuery] 제이쿼리 요소의 좌표, 위치 조작하기 본문

프로그래밍/Javascript

[jQuery] 제이쿼리 요소의 좌표, 위치 조작하기

빨강소 2020. 10. 28. 23:03
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
'프로그래밍/Javascript' Related Articles more
Comments