不一样的元素大小

@(C-工作问题)

元素的大小

在讲到offsetheight,clientheight,scrollheight的时候老是搞混,傻傻的分不清楚,在看完高程设计之后终于明白了其中的区别

偏移量

偏移量:包括元素在屏幕上占用的所有可见的空间,元素的可见大小是由其高度,宽度决定,包括所有的内边距,滚动条和边框大小(不包括外边距margin)
offsetHeight:元素在垂直方向上所占用的空间大小,以像素计,包括元素的高度(可见的) 水平滚动条的高度,上边框的高度和下边框的高度
offsetWidth:元素在水平方向所占用的空间大小,以像素计,包括元素的宽度(可见的) 垂直滚动条的宽度,左边框宽度和有边框宽度,
offsetLeft:元素的左外边框值包含元素的左内边框之间的像素距离
offsetTop: 元素的上外边框至包含元素的上内边框之间的像素距离
其中offsetLeft和offsetTop属性与包含元素有关,包含元素的引用保存在offsetParent属性中,offsetParent属性不一定与parentNode的值相等,例如元素的offsetParent是作为其祖先元素的

元素
要想知道元素在页面的偏移量,将这个元素的offsetLeft和offsetTop与其offsetParent的相同属性相加,如此循环值根元素,就可以得到一个基本准确的值

不一样的元素大小_第1张图片
Dimensions-offset.png

客户区大小

元素的客户区大小,指的是元素内容及其内边距所占据的空间大小,有关客户区的大小的属性有两个clientWidth和clientHeight其中clientWidth属性是元素内容区宽度加上左右内边距宽度,clientHeight属性是元素内容区加上上下内边距高度 都是不包括滚动条的


不一样的元素大小_第2张图片
Dimensions-client.png

滚动大小

滚动大小:指的是包含滚动内容的元素的大小,
scrollHeight :在没有滚动条的情况下,元素内容的总高度
scrollWidth:在没有滚动条的情况下,元素内容的总宽度
scrollLeft:被隐藏在内容区域左侧的像素数,通过设置这个属性可以改变元素的滚动位置
scrollTop:被隐藏在内容区域上方的像素数,通过设置这个属性可以改变元素的滚动位置


不一样的元素大小_第3张图片
scrollHeight.png

最后来张总结图


不一样的元素大小_第4张图片
589d33d1000196e705000419.jpg

你可能感兴趣的:(不一样的元素大小)