jQuery / Method / .offset() - 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시키는 메서드

.offset()

.offset()은 선택한 요소의 좌표를 가져오거나 특정 좌표로 이동시킵니다.

문법 1

.offset()

선택한 요소의 좌표를 가져옵니다. 예를 들어

var jb = $( 'h1' ).offset();

는 h1 요소의 좌표를 변수 jb에 저장합니다.

문법 2

.offset( coordinates )

선택한 요소를 특정 위치로 이동시킵니다. 예를 들어

$( 'h1' ).offset( { left: 100, top: 50 } );

은 h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.

예제 1

h1과 h2 요소의 좌표를 출력합니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        var jb1 = $( 'h1' ).offset();
        var jb2 = $( 'h2' ).offset();
        $( 'h2' ).after(
          '<p>' + 'H1 - Left : ' + jb1.left + ', Top : ' + jb1.top + '</p>'
          + '<p>' + 'H2 - Left : ' + jb2.left + ', Top : ' + jb2.top + '</p>'
        );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem</h2>
    <h2>Ipsum</h2>
  </body>
</html>

예제 2

h1 요소를 왼쪽에서 100px, 위에서 50px 위치로 이동시킵니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>jQuery</title>
    <script src="//code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
      $( document ).ready( function() {
        $( 'h1' ).offset( { left: 100, top: 50 } );
      } );
    </script>
  </head>
  <body>
    <h1>Lorem</h2>
    <h2>Ipsum</h2>
  </body>
</html>

같은 카테고리의 다른 글
jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

jQuery / Selector / :checked - 체크박스, 라디오 버튼에서 체크한 요소 선택하는 선택자

:checked는 체크박스(checkbox)에서 선택한 요소, 라디오 버튼(radio)에서 선택한 요소, 선택 목록(select)에서 선택한 요소(option)를 선택하는 선택자이다. 예제 1 - 라디오 버튼 색을 선택하면, div 요소의 배경색을 바꾼다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> * { ...

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

jQuery / Method / .animate() - 애니메이션 효과 만드는 메서드

.animate .animate()는 애니메이션 효과를 만듭니다. 문법 .animate( properties ) properties 애니메이션 효과를 줄 속성을 정합니다. 가능한 속성은 다음과 같습니다. backgroundPositionX backgroundPositionY borderBottomWidth borderLeftWidth borderRightWidth borderSpacing borderTopWidth borderWidth bottom fontSize height left letterSpacing lineHeight margin marginBottom marginLeft marginRight marginTop maxHeight maxWidth minHeight minWidth opacity outlineWidth padding paddingBottom paddingLeft paddingRight paddingTop right textIndent top width wordSpacing duration 애니메이션 효과를 완료할 때까지 걸리는 시간입니다. 단위는 1/1000초, 기본값은 400입니다. fast나 slow로 정할 수 있습니다. fast는 200, slow는 600에 해당합니다. easing 애니메이션 효과의 방식을 정합니다. swing과 linear이 가능하며, 기본값은 swing입니다. complete 요소가 사라진 후 ...

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

jQuery / Method / .removeAttr() - 선택한 요소의 특정 속성을 제거하는 메서드

.removeAttr() .removeAttr()은 선택한 요소의 특정 속성을 제거한다. 문법 attributeName 속성을 제거한다. .removeAttr( attributeName ) 예를 들어 아래는 h1 요소에서 title 속성을 제거한다. $( 'h1' ).removeAttr( 'title' ); 예제 input 요소의 placeholder 속성을 제거한다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> input { font-size: ...

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

jQuery / Method / .resize() - 윈도우 크기 변할 때 어떤 작업하기

.resize() .resize()는 윈도우 크기가 바뀔 때 어떤 작업을 할 수 있게 합니다. 문법 $( window ).resize( function() { // do somthing ​} ); 예제 웹브라우저의 크기를 변경할 때, p 요소의 가로폭을 출력합니다. 윈도우 크기를 변경하면 숫자가 바뀝니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> ...

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

jQuery / Method / .scrollTop() - 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정하는 메서드

.scrollTop() .scrollTop()은 선택한 요소의 스크롤바 수직 위치를 반환하거나 스크롤바 수직 위치를 정합니다. 문법 1 .scrollTop() 스크롤바 수직 위치를 가져옵니다. 예를 들어 $( 'div' ).scrollTop(); 는 div 요소의 스크롤바 수직 위치를 가져옵니다. 문법 2 .scrollTop( value ) 스크롤바 수직 위치를 정합니다. 예를 들어 $( 'div' ).scrollTop( 300 ); 은 div 요소의 스크롤바 위치를 위에서 300px로 정합니다. 예제 1 버튼을 클릭하면 div 요소의 스크롤바 위치를 ...

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

jQuery / 자식 요소의 개수를 기준으로 부모 요소 선택하기

자식 요소의 개수를 기준으로 부모 요소을 선택하기 위해서는 스크립트를 이용해야 합니다. 다음은 jQuery를 이용한 간단한 예제입니다. li 요소를 3개 이상 가진 ol 요소를 선택해서 글자를 빨간색으로 만듭니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <style> .a ...

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

jQuery / 스크롤해도 상단에 고정되는 메뉴 만들기

상단 고정 메뉴 웹페이지의 내용이 많으면 아래로 스크롤해서 보게 됩니다. 그러면 페이지에 있는 모든 내용이 움직이고 상단에 있는 메뉴도 위로 사라지게 됩니다. 이렇게 되면 페이지의 내용을 다 보고 다른 메뉴로 이동하려 할 때 다시 문서의 위로 스크롤해서 올라가야 하는 불편이 있습니다. 모바일 기기에서라면 더욱 불편합니다. 이 불편을 해소하는 방법 중의 하나가 메뉴를 고정시키는 ...

jQuery / Method / jQuery.inArray()

jQuery / Method / jQuery.inArray()

jQuery.inArray() jQuery.inArray()로 배열에 특정 값이 있는지 알아낼 수 있습니다. 문법 jQuery.inArray( value, array ) value : 검색하고자 하는 값을 입력합니다. array : 배열의 이름을 입력합니다. fromIndex : 선택사항으로 몇 번째 배열 값부터 검색할지를 정합니다. 입력하지 않았을 때의 기본값은 0으로, 첫 번째 배열 값부터 검색합니다. 예를 들어 jQuery.inArray( 'as', jbAry ) 는 jbAry라는 배열에 as라는 값이 있는지 ...

jQuery / meta 태그의 값 가져오기

jQuery / meta 태그의 값 가져오기

jQuery로 원하는 meta 태그를 선택하여 값을 가져오는 방법은 다음과 같습니다. $( 'meta' ).attr( 'content' ); meta 태그 중 name이 xxx인 것을 선택하고, content 속성의 값을 가져오라는 뜻입니다. <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <meta name="author" content="JB"> <meta property="og:image" content="abc.png"> ...

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

jQuery / Selector / :has() - 특정 요소를 포함하는 요소를 선택하는 선택자

:has() :has()는 특정 요소를 포함하는 요소를 선택할 때 사용하는 선택자입니다. 문법 $( ':has(selector)' ) 예를 들어 $( 'p:has(span)' ) 은 span 요소를 가지고 있는 p 요소를 선택합니다. 예제 <!doctype html> <html lang="ko"> <head> <meta charset="utf-8"> <title>jQuery</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script> $( document ...