关于Element中的clientWidth,scrollWidth,offsetWidth等属性详解

2019独角兽企业重金招聘Python工程师标准>>>

client-属性

clientWidth，clientHeight

 只读属性，表示一个元素的**可见区域**宽高，以像素计单位；该属性即包括元素的padding,但不包括border，margin以及改元素滚动条的宽高。

clientWidth = width + padding - scrollbar(滚动条宽度，如果有的话） clientHeight = height + padding -scrollbar(滚动条高度，如果有的话）

clientLeft，clientTop

跟clientWidth和clientHeight大不同，它们仅仅表示元素的左边框宽度和上边框宽度。

sroll-属性

scrollTop，scrollLeft

可读可写属性，表示一个元素在有滚动条的情况下，被卷去的高宽。

scrollWidth，scrollHeight

只读属性，表示一个元素正文全文宽高

scrollWidth = clientWidth + scrollLeft(如果有滚动条的话）

offset-属性

offsetWidth，offsetHeight

只读属性，表示一个元素的布局宽高，等于这个元素的宽高加上padding,border

offsetWidth = width + padding +border

offsetLeft，offsetTop

只读属性，表示当前元素距离上级有定位的元素左边或上边边框的距离，如果上级元素没有定位，则往更上一级寻找，直至body。

属性总览图

转载于:https://my.oschina.net/huskydog/blog/875572