JS“盒子模型”

列举几个常用的属性

client系列

 clientWidth - 盒子真实内容的宽度[content+padding左右],不包括边线和滚动条

 clientHeight - 盒子真实内容的高度[content+padding上下],不包括边线和滚动条

 clientTop - 盒子上边框的宽度[border-top]

 clientLeft - 盒子左边框的宽度[border-left]

offset系列:获取整个盒子的宽高

 offsetWidth - 整个盒子的宽度[content+padding+border]

 offsetHeight - 整个盒子的高度[content+padding+border]

 offsetParent - 父级参照物:一个元素的父级参照物,就看它的父级是否有发生定位,如果有,那么它的父级就是当前元素的父级参照物,

                       如果没有,那么它的父级参照物就是body

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

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

 scroll系列

 scrollWidth - 盒子真实内容【包括溢出和未溢出】的宽度,没有溢出的情况下 scrollWidth=clientWidth,有溢出盒子的scrollWidth+溢出宽度

 scrollHeight - 盒子真实内容【包括溢出和未溢出】的高度,没有溢出的情况下 scrollHeight=clientHeight,有溢出盒子的scrollHeight+溢出高度

 scrollTop - 盒子向上卷出去的距离

 scrollLeft - 盒子向右卷出去的距离

 

封装一个获取当前元素距离body的距离的方法

 

function offset (ele){
let l = ele.offsetLeft;
let t = ele.offsetTop;
let parent = ele.offsetParent;
while(parent.tagName !== 'BODY'){
l+= parent.clientLeft + parent.offsetLeft;
t+= parent.clientTop + parent.offsetTop;
// 需要不断的跟新父级参照物
parent = parent.offsetParent
}
return {left:l,top:t}
}

 

 

 


posted @ 2018-09-02 21:33  五迷  阅读(316)  评论(0编辑  收藏  举报