브라우저 창의 표시 영역의 높이와 너비를 가져옵니다. 스크롤 막대 높이가 필요한 친구는 참고할 수 있습니다.
IE에서는 다음과 같은 방법으로만 브라우저 표시 창 크기를 얻을 수 있습니다. 다음과 같이 코드를 복사하세요.
document.body.offsetWidth document.body.offsetHeight
DOCTYPE을 선언한 브라우저에서는 다음을 사용하여 브라우저 표시 창 크기를 얻을 수 있습니다. : 코드 다음과 같이 코드를 복사합니다.
document.documentElement.clientWidth document.documentElement.clientHeight
IE, FF, Safari는 모두 이 방법을 지원하지만 오페라에서는 이 속성을 지원하지만
동시에 다음을 제외한 모든 브라우저가 이 속성을 반환합니다. IE는 이 방법을 사용하는데, 정보는 window 객체에 저장되며 다음 코드를 사용하여 얻을 수 있습니다. 다음과 같이 코드를 복사합니다
window.innerWidth window.innerHeight
일반적으로 전체 웹 페이지의 크기를 구합니다. 다음과 같이 코드를 복사합니다.
document.body.scrollWidth document.body.scrollHeight
화면 해상도와 높이는 일반적으로 구합니다. 메소드 코드는 다음과 같습니다. 코드를 복사합니다.
window.screen.height window.screen.width
예제를 요약하면
function 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 = width + padding clientHeight = height + padding offsetWidth = width + padding + border offsetHeight = height + padding + border IE5.0/5.5: clientWidth = width - border clientHeight = height - border offsetWidth = width offsetHeight = height
첨부된 방법은 전체 페이지의 너비와 높이를 얻는 데 가장 일반적으로 사용되는 방법입니다(jquery 프레임워크 필요). . 다음과 같이 코드를 복사하세요
$(document).width() < $('body').width() ? $(document).width() : $('body').width(); $(document).height() < $('body').height() ? $(document).height() : $('body').height();
alert($(window).height()) //Browser 창의 현재 보이는 영역의 높이
alert($(document ).height()); //브라우저의 현재 윈도우 문서 높이
alert($(document.body).height());//Browse 브라우저의 현재 윈도우 문서 본문 높이
alert($(document.body).outerHeight(true));//브라우저에서 현재 창 문서 본문의 전체 높이에는 테두리 패딩 여백이 포함됩니다
alert($(window).width()) ; //브라우저의 현재 창 가시 영역 너비
alert($(document).width());//브라우저의 현재 창 문서 개체 너비
alert($(document.body) ).width() );//브라우저의 현재 창 문서 본문 높이
alert($(document.body).outerWidth(true));//브라우저의 현재 창 문서 본문의 전체 너비에는 테두리 여백 여백이 포함됩니다.
alert($(document).scrollTop()); //스크롤 막대의 수직 높이를 맨 위로 가져옵니다.
alert($(document).scrollLeft()); 왼쪽 세로 너비
브라우저 창 표시 영역의 높이와 너비 및 스크롤 막대 높이 구현 코드를 얻기 위한 추가 js/jquery에 대해서는 PHP 중국어 웹사이트에서 관련 기사를 주목하세요!