Programming

jquery를 사용하지 않고 문서 높이와 너비를 얻는 방법

procodes 2020. 8. 15. 15:16
반응형

jquery를 사용하지 않고 문서 높이와 너비를 얻는 방법


를 사용하지 않고 순수한 에서 문서 높이와 너비를 얻는 방법 . 나는 대해 알고 있지만 하고 싶습니다 .
$(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`

필요한 경우 모든 창 크기 조정 이벤트에서이를 업데이트 할 수 있습니다.

참고 URL : https://stackoverflow.com/questions/5484578/how-to-get-document-height-and-width-without-using-jquery

반응형