如何获取可视区域宽高，获取元素到在文档中的位置

 

元素

• 宽和高

// 元素.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
    }
}