JS盒子模型

DOM  js盒子模型-->浏览器提供一些获取盒子位置信息的属性和方法

1、clientWidth/clientHeight
clientWidth:width+左右padding
clientHeight:height+上下padding

2、clientTop/clientLeft
clientTop:上边框的高度
clientLeft:左边框的宽度
不存在clientRight和clientBottom，这两属性的是都是undefined

3、offsetWidth/offsetHeight
offsetWidth:clientWidth+左右边框
offsetHeight:clientHeight+上下边框

高度不设置的话，高度会自适应，height的值就是实际内容的高度

4、scrollWidth/scrollHeight
在没有内容溢出的情况下和clientWidth/clientHeight是一样的
有内容的溢出情况(在每一个浏览器中的值不太一样,加上overflow: hidden和不加还有少许的区别):
scrollHeight:约等于 真实内容的高度(包含溢出的内容)+上padding
scrollWidth:约等于 真实内容的宽度(包含溢出的内容)+左padding
console.log(oDiv.scrollHeight);

获取当前浏览器一屏幕的宽度和高度
console.log(document.documentElement.clientWidth || document.body.clientWidth);
console.log(document.documentElement.clientHeight || document.body.clientHeight);

当前所有屏加起来的高度(当前网页的高度)~=
console.log(document.documentElement.scrollHeight||document.body.scrollHeight);

 

5、offsetLeft/offsetTop

偏移量：当前盒子的外边框距离父级参照物产生的位移

offsetLeft：当前元素的外边框距离父级参照物的左偏移量

offsetTop：当前元素的外边框距离父级参照物的上偏移量

 获取curEle距离body的偏移量:{top:xxx,left:xxx}

function offset(curEle) {
    var left = curEle.offsetLeft;
    var top = curEle.offsetTop;
    var par = curEle.offsetParent;
    while (par) {
        //在标准的IE8浏览器中，不需要加边框
        //navigator.userAgent获取当前浏览器所有的版本的信息
        if (navigator.userAgent.indexOf("MSIE 8.0") <= -1) {
            //条件成立代表不是IE8浏览器，我们加上边框
            left += par.clientLeft;
            top += par.clientTop;
        }
        left += par.offsetLeft;
        top += par.offsetTop;
        par = par.offsetParent;
    }
    return {
        left: left,
        top: top
    };
}

前面的10个盒子模型的属性(clientWidth/clientHeight等)都是只读的
6、scrollLeft/scrollTop是可读写的
scrollTop:当前滚动条卷去的高度
scrollLeft:当前滚动条卷去的宽度