>웹 프론트엔드 >JS 튜토리얼 >js/jquery는 브라우저 창의 표시 영역의 높이와 너비 및 스크롤 막대 구현 code_jquery의 높이를 가져옵니다.

js/jquery는 브라우저 창의 표시 영역의 높이와 너비 및 스크롤 막대 구현 code_jquery의 높이를 가져옵니다.

WBOY
WBOY원래의
2016-05-16 17:46:26928검색

브라우저 창의 표시 영역의 높이와 너비를 가져옵니다. 스크롤 막대의 높이가 필요한 친구는 이를 참조할 수 있습니다.
IE에서는 브라우저 표시 창 크기를 다음과 같이 얻을 수 있습니다. 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.

document.body.offsetWidth
document.body.offsetHeight

DOCTYPE을 선언하는 브라우저에서 다음을 수행할 수 있습니다. 브라우저 표시 창 크기를 얻으려면 다음을 사용하십시오. 코드는 다음과 같습니다. 코드 복사
코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

document.documentElement.clientWidth
document.documentElement.clientHeight

IE, FF, Safari는 모두 이 속성을 지원하지만,
동시에 IE를 제외한 모든 브라우저 이 정보는 창 개체에 저장되며 다음 코드를 사용하여 얻을 수 있습니다. 코드 복사
코드 복사 코드는 다음과 같습니다.

window.innerWidth
window.innerHeight

얻는 일반적인 방법 전체 웹 페이지의 크기는 다음과 같습니다. 코드 복사
코드 복사 코드는 다음과 같습니다.

document.body.scrollWidth
document.body.scrollHeight

일반적으로 화면 해상도 높이를 구합니다. 방법 코드는 다음과 같습니다
코드 복사 코드는 다음과 같습니다.
window.screen.height
window.screen.width

예제를 요약하자면

코드 복사 코드는 다음과 같습니다.
함수 getViewSizeWithoutScrollbar(){//스크롤 막대를 포함하지 않음
return {
width : document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
function getViewSizeWithScrollbar(){//스크롤 막대 포함
if(window.innerWidth){
return {
width : window.innerWidth,
height: window.innerHeight
}
}else if(document.documentElement.offsetWidth == document.documentElement.clientWidth){
return {
width : document.documentElement.offsetWidth,
height: document.documentElement.offsetHeight
}
}else{
return {
width: document.documentElement.clientWidth getScrollWith(),
height: document.documentElement.clientHeight getScrollWith()
}
}
}

IE와 FireFox의 차이점은 다음과 같습니다.
IE6.0, FF1.06:

코드 복사 코드는 다음과 같습니다.
clientWidth = 너비 패딩
clientHeight = 높이 패딩
offsetWidth = 너비 패딩 테두리
offsetHeight = 높이 패딩 테두리
IE5 .0/5.5 :
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height

Attached는 가장 일반적으로 사용되는 방법입니다. 전체 페이지의 너비와 높이를 가져옵니다. 방법(jquery 프레임워크 필요) 코드는 다음과 같습니다.

코드를 복사하세요. 코드는 다음과 같습니다.
$( document).width() < $('body').width() ? $(document).width() : $(' body').width();
$(document).height() < $('body').height() ? $(document).height() : $('body').height( );


alert($(window).height()); //현재 브라우저 창의 표시 영역 높이
alert($(document).height()); 브라우저의 현재 창 문서
alert($(document.body).height());//브라우저의 현재 창에서 문서 본문의 높이
alert($(document.body).outerHeight (true));//브라우저의 현재 창 높이 문서 본문의 전체 높이에는 테두리 패딩 여백이 포함됩니다
alert($(window).width()) //표시되는 브라우저의 현재 창 너비 Area
alert($(document).width());/ /브라우저의 현재 창 문서 너비
alert($(document.body).width());//현재 창 문서의 너비 브라우저의 현재 창 문서 본문
alert($(document.body).outerWidth( true)) //브라우저의 현재 창 문서 본문의 전체 너비에는 테두리 패딩 여백이 포함됩니다

Alert($(document).scrollTop()); //스크롤 막대의 세로 높이를 맨 위로 가져옵니다.
Alert($(document).scrollLeft()) //스크롤 막대의 세로 너비를 가져옵니다. 왼쪽으로
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.