width/height 구하기

크로스 브라우징

window.width / window.height

function getWindowWidth() {

    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
}


function getWindowHeight() {
   return window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
}

Element height 

1. dom script

Element.offsetHeight 

- 엘리먼트 높이값+padding-top+padding-bottom+border-top+border-bottom 

 

 

Element clientHeight

- 엘리먼트 높이값+padding-top+padding-bottom

 

2. jQuery 방식

$(ele).outerHeight()

- padding,border를 포함한 값을 가지고 온다. outerHeight(true)로 설정하면 margin값도 포함된 height값을 가지고 온다.

 

$(ele).innerHeight()

- padding까지만 포함된 높이값을 가지고 온다.

 

$(ele).height()

- 엘리먼트의 순수 높이값만 가져온다.

 

 

엘리먼트의 크기와 위치를 알고 싶을 때

function getBoundingClientRect(ele) {
    var clientRect = ele.getBoundingClientRect();
    
    // ie8 에서 width/height 속성이 없다.
    if (typeof clientRect.height === 'undefined') {
        return {
            top: clientRect.top,
            bottom: clientRect.bottom,
            left: clientRect.left,
            right: clientRect.right,
            width: clientRect.right - clientRect.left,
            height: clientRect.bottom - clientRect.top
        };
    }
    return clientRect;
}

 

 

엘리먼트를 전부 포함한 값 ( 즉 document 의 실질적 height )

function getDocHeight() {
    var doc= document;
    return Math.max(
        doc.body.scrollHeight, doc.documentElement.scrollHeight,
        doc.body.offsetHeight, doc.documentElement.offsetHeight,
        doc.body.clientHeight, doc.documentElement.clientHeight
    );
}