scrollLeft offsetLeft clientLeft 详解

 

 

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