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

js/jquery는 브라우저 창의 가시 영역의 높이와 너비 및 스크롤 막대 높이 구현 코드를 얻습니다.

高洛峰
풀어 주다: 2017-01-11 09:39:25
원래의
1725명이 탐색했습니다.

브라우저 창의 표시 영역의 높이와 너비를 가져옵니다. 스크롤 막대 높이가 필요한 친구는 참고할 수 있습니다.
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() < $(&#39;body&#39;).width() ? $(document).width() : $(&#39;body&#39;).width(); 
$(document).height() < $(&#39;body&#39;).height() ? $(document).height() : $(&#39;body&#39;).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 중국어 웹사이트에서 관련 기사를 주목하세요!

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