> 웹 프론트엔드 > JS 튜토리얼 > JS 및 JQUERY는 페이지 크기, 스크롤 막대 위치, 요소 위치(샘플 코드)를 가져옵니다.

JS 및 JQUERY는 페이지 크기, 스크롤 막대 위치, 요소 위치(샘플 코드)를 가져옵니다.

WBOY
풀어 주다: 2016-05-16 17:09:04
원래의
902명이 탐색했습니다.

JS 및 jquery는 페이지 크기, 스크롤 막대 위치 및 요소 위치를 가져옵니다

코드 복사 코드는 다음과 같습니다. :

//페이지 위치 및 창 크기

function GetPageSize() {
var scrW, scrH;
if(window.innerHeight && window.scrollMaxY)
{ // Mozilla
scrW = window.innerWidth window.scrollMaxX; >scrH = window.innerHeight window.scrollMaxY;
}
else if(document.body.scrollHeight > document.body.offsetHeight)
{ // IE Mac을 제외한 모두
scrW = document. body.scrollWidth;
scrH = document.body.scrollHeight;
} else if(document.body)
{ // IE Mac
scrW = document.body.offsetWidth; document.body.offsetHeight;
}
var winW, winH;
if(window.innerHeight)
{ // IE를 제외한 모두  
winW = window.innerWidth; window.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight)
{ // IE 6 엄격 모드
winW = document.documentElement.clientWidth
winH = document.documentElement; .clientHeight;
} else if (document.body) { // other
winW = document.body.clientWidth;
winH = document.body.clientHeight
} // 전체 크기는 뷰포트보다 작습니다.
var pageW = (scrWvar pageH = (scrHreturn {PageW:pageW, PageH:pageH; , WinW:winW, WinH:winH};

};

//스크롤 막대 위치

function GetPageScroll()
{
var x, y; if(window.pageYOffset)
{ / / IE를 제외한 모든
y = window.pageYOffset;
x = window.pageXOffset
} else if(document.documentElement && document.documentElement.scrollTop)
{ // IE 6 엄격
y = document.documentElement.scrollTop;
x = document.documentElement.scrollLeft;
} else if(document.body) { // 기타 모든 IE
y = document.body.scrollTop; >x = document.body.scrollLeft;
}
return {X:x, Y:y};

}


jquery


브라우저 표시 영역의 높이 가져오기: $(window).height(); 브라우저 표시 영역의 너비 가져오기: $(window).width() 문서 높이 가져오기; 페이지: $ (document).height(); 페이지의 문서 너비 가져오기: $(document).width();


위쪽에서 스크롤 막대의 세로 높이 가져오기: $(document).scrollTop();
왼쪽에서 스크롤 막대의 세로 너비 가져오기: $(document).scrollLeft(); >

요소 위치 및 오프셋 계산


오프셋 메서드는 묶음 집합의 첫 번째 요소에 대한 오프셋 정보를 반환하는 매우 유용한 메서드입니다. 기본적으로 본체에 대한 오프셋 정보입니다. 결과에는 top과 left라는 두 가지 속성이 포함됩니다.

offset(options, results)

options.relativeTo 계산된 오프셋 위치를 기준으로 조상 요소를 지정합니다. 이 요소는 상대적으로 또는 절대적으로 배치되어야 합니다. 생략하면 본문을 기준으로 합니다. options.scroll 스크롤 막대 포함 여부, 기본값은 TRUE
options.padding 패딩 포함 여부, 기본값은 false
options.margin 여백 포함 여부, 기본값은 true
options .border 테두리 포함 여부, 기본값은 true

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿