DOM——js盒子模型

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个盒子模型的属性都是只读的
6、scrollLeft/scrollTop是可读写的
scrollTop:当前滚动条卷去的高度
scrollLeft:当前滚动条卷去的宽度

回到顶部案例，图片延迟加载案例

DOM——js盒子模型

相关推荐