js中的盒子模型

事件对象中的模型

            e.offsetX 鼠标源的偏移量

            e.screenX 屏幕

            e.pageX   文档 document

            e.clientX 视口 html

当前页面卷去的距离：

let sY=window.pageYOffset||document.body.scrollTop||document.documentElement.scrollTop

重点:

            1.获取元素的几何尺寸

            var el=document.querySelector(".box")

            var re=el.getBoundingClientRect();

            console.log(re)

            

            var w=el.offsetWidth

            console.log(w)

            

            var x=el.offsetLeft//相对于有定位级别的父级

            console.log(x)

            

            // el.parentElement

            el.offsetParent//定位级别的父级

            el.clientWidth//没有border  padding w

            el.offsetWidth//有border    padding w

            

            function postionabs (el) {

                   var x=el.offsetLeft

                   var y=el.offsetTop

                   var baba=el.offsetParent

                   while(baba){

                       x+=baba.offsetLeft

                       y+=baba.offsetTop

                       baba=baba.offsetParent

                   }

                   return {x,y}

            }