jquery를 사용하지 않고 문서 높이와 너비를 얻는 방법
jquery 를 사용하지 않고 순수한 자바 스크립트 에서 문서 높이와 너비를 얻는 방법 . 나는 및 에 대해 알고 있지만 javascript로 하고 싶습니다 .$(document).height()
$(document).width()
페이지의 높이와 너비를 의미했습니다.
var height = document.body.clientHeight;
var width = document.body.clientWidth;
더 나은 설명을 위해이 기사 를 확인하십시오 .
http://www.howtocreate.co.uk/tutorials/javascript/browserwindow에 제공된 마지막 예제조차도 Quirks 모드에서 작동하지 않습니다. 내가 생각했던 것보다 쉽게 찾을 수 있는데, 이것이 해결책 인 것 같습니다 (최신 jquery 코드에서 발췌).
Math.max(
document.documentElement["clientWidth"],
document.body["scrollWidth"],
document.documentElement["scrollWidth"],
document.body["offsetWidth"],
document.documentElement["offsetWidth"]
);
높이를 얻으려면 너비를 "높이"로 바꾸십시오.
이것은 브라우저 간 솔루션입니다.
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
getBoundingClientRect
일반적으로 크로스 브라우저에서 작동 하고 경계 사각형에서 하위 픽셀 정밀도 를 제공 하므로 사용해야합니다 .
elem.getBoundingClientRect()
jQuery없이 문서 크기 가져 오기
document.documentElement.clientWidth
document.documentElement.clientHeight
그리고 화면 크기가 필요한 경우 이것을 사용하십시오.
screen.width
screen.height
시도해 볼 수도 있습니다.
document.body.offsetHeight
document.body.offsetWidth
이것은 모든 브라우저 / 장치에서 작동합니다.
function getActualWidth()
{
var actualWidth = window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth ||
document.body.offsetWidth;
return actualWidth;
}
오버플로를 포함하여 페이지의 전체 너비를 얻으려면 document.body.scrollWidth
.
문서 너비와 높이를 매우 쉽게 찾는 방법은 무엇입니까?
HTML
<span id="hidden_placer" style="position:absolute;right:0;bottom:0;visibility:hidden;"></span>
자바 스크립트
var c=document.querySelector('#hidden_placer');
var r=c.getBoundingClientRect();
r.right=document width
r.bottom=document height`
필요한 경우 모든 창 크기 조정 이벤트에서이를 업데이트 할 수 있습니다.
'Programming' 카테고리의 다른 글
표준 C ++에서 모든 파일 / 디렉토리를 재귀 적으로 어떻게 반복합니까? (0) | 2020.08.15 |
---|---|
jquery를 사용하지 않고 문서 높이와 너비를 얻는 방법 (0) | 2020.08.15 |
div 너비보다 작은 테두리 길이? (0) | 2020.08.15 |
UICollectionViewCell에서 길게 누르기 제스처 (0) | 2020.08.15 |
Django의 urls.py에서 템플릿으로 바로 이동하려면 어떻게해야합니까? (0) | 2020.08.15 |