元素

• 寬和高

// 元素.style.width         只能獲取行內
// getStyle(元素, 'width')     自己封裝的
// 元素.clientWidth
// 元素.offsetWidth
//可以獲取行內和非行內的寬和高
console.log(box.clientWidth); // width + padding
console.log(box.offsetWidth); // width + padding + border
// 高也一樣

可視區寬高

// 可視區的寬高(html)
alert(document.documentElement.clientWidth);
alert(document.documentElement.clientHeight);
 

body和html

console.log(document.body); // body標籤
console.log(document.documentElement); // html標籤

上邊框寬和左邊框寬

// 元素的上邊框寬和左邊框寬
console.log(box.clientTop); // 1
console.log(box.clientLeft); // 1

元素的位置

• 元素.offsetLeft 元素.offsetTop

元素到離它最近的有定位屬性的父級的距離，如果沒有定位的父級，則到body的距離

<div id="box1">
    <
 
div id="box2">
        <div id="box3"></div>
    </div>
</div>

var box3 = document.getElementById('box3');
console.log(box3.offsetLeft, box3.offsetTop);

// ----------------------------------
// 封裝一個方法，返回任何一個元素到文件的距離
console.log(getPos(box3)); // { left: 108, top: 88 }

function getPos(ele) {
    
 
var l = 0;
    var t = 0;

    while (ele) {
        l += ele.offsetLeft;
        t += ele.offsetTop;
        ele = ele.offsetParent;
    }

    return {
        left: l,
        top: t
    }
}