브라우저 창의 표시 영역의 높이와 너비를 가져옵니다. 스크롤 막대의 높이가 필요한 친구는 이를 참조할 수 있습니다.
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()) //스크롤 막대의 세로 너비를 가져옵니다. 왼쪽으로