scrollLeft offsetLeft clientLeft 详解

最新推荐文章于 2021-08-24 22:14:21 发布

转载最新推荐文章于 2021-08-24 22:14:21 发布 · 403 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/AxinBYZ/p/5337803.html

本文详细介绍了scroll系列属性（scrollLeft, scrollTop, scrollHeight, scrollWidth）、offset系列属性（offsetLeft, offsetTop, offsetWidth, offsetHeight）及client系列属性（clientLeft, clientTop, clientWidth, clientHeight）的使用方法与应用场景。这些属性对于实现网页布局、响应式设计以及交互式滚动效果至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

scroll系列属性

scrollLeft ：设置和获取当前左滚动的距离，即左卷的距离；

scrollTop：设置和获取当前上滚的距离，即上卷的距离；

scrollHeight：获取对象可滚动的总高度；

scrollWidth：获取对象可滚动的总宽度；

属性使用方法：
var div1=document.getElementById("out");
div1 . scrollLeft div1 . scrollTop
div1 . scrollHeight div1 . scrollWidth

offset系列属性介绍
offsetLeft：获取对象左侧与父级之间的距离（默认是body）

offsetTop：获取对象上册与父级之间的距离（默认是body）

ps:获取对象到腹肌的距离取决于最近的定位父级

offsetWidth：获取元素自身的宽度（包含边框）

offsetHeight：获取元素自身的高度（包含边框）

属性使用方法：
var div1=document.getElementById("out");
div1 . offsetLeft div1 . offsetTop
div1 . offsetWidth div1 . offsetHeight

client系列属性介绍
clientLeft、clientTop：获取元素内容到边框的距离，效果和边框宽度相同，很少使用
clientWidth：获取元素自身的宽度（不含边框）
clientHeight：获取元素自身的高度（不含边框）
属性使用方法：
var div1=document.getElementById("out");
div1 . clientLeft div1 . clientTop
div1 . clientWidth div1 . clientHeight

转载于:https://www.cnblogs.com/AxinBYZ/p/5337803.html