프리랜서 웹디자이너 웹퍼블리셔RELATION

RELATION 로고

홈페이지 소스

[소스] .offset() .position()

2023.07.21
북마크 작성자 정보
Jquery
.offset() : html 기준 좌표값 구하기
.poisiton() : 부모기준 좌표값 구하기
 
$("button").on("click", function(){
    $("p").offset({ top: 200, left: 10 });
    var p = $("p:first").offset();
    $("span").text("top: " + p.top + "xp, left: " + p.left + "xp");
});
 

offsetParent()

- offsetLeft, offsetTop 의 기준이 될 부모 엘리먼트

(동적 위치인 경우는 동적위치가 적용된 상위(부모) 엘리먼트)

offset().left, offset().top

- Documet를 기준으로 한 엘리먼트의 위치 값

position().left, positon().top

- 부모(offsetParent)엘리먼트를 기준으로 한 엘리먼트(요소)가 위치한 x, y 좌표값

scrollLeft(), scrollTop()

- 스크롤이 발생된 위치 값까지 계산된 x, y 값을 반환

outerWidth(), outerHeight()

- 엘리먼트의 넓이와 높이 (단 , 마진만 제외)

$(window).width()

$(window).height()

- window의 넓이와 높이 (단, 메뉴바, 툴바, 스크롤바의 크기는 제외)

$(document).width()

$(document).height()

- document 영역의 전체 넓이와 높이

clientX, clientY

pageX, pageY

offsetX, offsetY

screenX, screenY

- 자바스크립트 DOM에서의 Event객체를 그대로 복사하여 사용하기 때문에 DOM에서의 MouseEvent 프로퍼티와 동일하게 사용 가능하다.

(Mo

이 포스트 공유하기

전체목록