offset() 메서드를 이용하여 left, top 값 set, get 하기

잘살아보자

· 11년 전 · 조회 3014 3014

offset()은 요소의 left, top값을 get또는 set 할 수 있는 메서드입니다.
먼저 요소의 left,top값을 get하는 방법을 알아 볼게요
<형식>

$(선택자).offset().left
$(선택자).offset().top

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        div{width:100px;height:100px;background:red;position:absolute;left:20px;top:50px;}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(function(){
            var offset = $('div').offset();
            $('p').html(offset.left + '/' + offset.top);
        });
    </script>
</head>
<body>
    <p></p>
    <div>컨텐츠</div>
</body>
</html>

set하는 형식은
$(선택자).offset({left:값,top:값})

<!DOCTYPE HTML>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0;padding:0;}
        div{width:100px;height:100px;background:red;}
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
        $(function(){
            $('div').offset({left:30,top:50});
        });
    </script>
</head>
<body>
    <div>컨텐츠</div>
</body>
</html>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시판 목록

팁게시판

디자인과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

글쓰기

번호	제목	글쓴이	날짜	조회
5527	파일 처리 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	717
5526	파일 처리 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	642
5525	날짜 및 시간 함수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	967
5524	파일 처리 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	834
5523	문자열 함수(5) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	634
5522	문자열 함수(4) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	789
5521	문자열 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	803
5520	문자열 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	819
5519	문자열 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	915
5518	사용자 정의 함수(3) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	562
5517	사용자 정의 함수(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	609
5516	사용자 정의 함수(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	787
5515	그 밖의 제어문 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	629
5514	반복 제어문(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	659
5513	반복 제어문(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	644
5512	조건 제어문(2) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	565
5511	조건 제어문(1) #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	628
5510	비교 연산자, 논리 연산자 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	1242
5509	산술 연산자, 대입 연산자 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	573
5508	폼(Form)을 통한 변수의 전달 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	890
5507	가변 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	788
5506	정적 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	536
5505	전역 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	559
5504	배열 변수 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	648
5503	변수 사용법 #개발자 #php	돌아온깡통 프로필 보기 이 회원 글보기 이 회원의 댓글보기	11년 전	650

파일 처리 함수(3)

#개발자 #php

돌아온깡통

offset() 메서드를 이용하여 left, top 값 set, get 하기

댓글 작성

게시판 목록

팁게시판

파일 처리 함수(3)

파일 처리 함수(2)

날짜 및 시간 함수

파일 처리 함수(1)

문자열 함수(5)

문자열 함수(4)

문자열 함수(3)

문자열 함수(2)

문자열 함수(1)

사용자 정의 함수(3)

사용자 정의 함수(2)

사용자 정의 함수(1)

그 밖의 제어문

반복 제어문(2)

반복 제어문(1)

조건 제어문(2)

조건 제어문(1)

비교 연산자, 논리 연산자

산술 연산자, 대입 연산자

폼(Form)을 통한 변수의 전달

가변 변수

정적 변수

전역 변수

배열 변수

변수 사용법