clientTop、scrollTop、offsetTop详解

Posted 2023-05-15

参考技术A

参考链接： http://blog.csdn.net/lidiansheng/article/details/7950751

对象的可见宽度

内容的可见宽度

元素完整的高度和宽度，overflow:hidden的部分也计算在内。

当前元素距浏览器边界的偏移量，以像素为单位。

这个属性测试下来的结果就是border。

设置或返回已经滚动到元素的左边界或上边界的像素数。

比如下方例子中：clientWidth=300+20-17=303

比如下方例子中： offsetWidth *=300+20+16=336 ***

等式③：clientTop=border-top属性值（‘-’不是减号，是连字符）

等式④：offset Top=元素距上边界高度+margin

比如下方例子中： offsetTop =150+15=165

scrollTop：元素的滚动值 （可用来做滚动效果）

显示效果：

界面显示：

后台输出：

隐藏部分的高度scrollTopMax：

BOM

offset ：以目标元素的左上角为基准点得到的坐标
screenY： 以屏幕的左上角为基准点得到的坐标
 client： 以浏览器可视区域的左上角为基准点得到的坐标
 layer： 以页面的左上角为基准点得到的坐标

 

*content_box
* clientTop:上边框宽度
* clientWidth：样式的宽度+左右padding
* scrollTop:对象被卷去的高度
* scrollHeight：对象实际高度
* offsetTop:对象的上边框到页面的顶部
* offsetWidth：样式宽度+左右padding+左右border
*
*
* border_box
* clientTop:上边框宽度
* clientWidth：样式的宽度-左右border
* scrollTop:对象被卷去的高度
* scrollHeight：对象实际高度
* offsetTop:对象的上边框到页面的顶部
* offsetWidth：样式宽度
* */