js中offset家族、client家族、scroll家族详细解释

 

1-offset家族

offset家族有以下几个值

• offsetWidth
• offsetHeight
• offsetLeft
• offsetTop

• offsetParent

 offsetWidth和offsetTop

用来获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth /Height= width + border + padding，与其他元素无关，获取的值是一个纯数字

offsetLeft 和 offsetTop

获取距离第一个有定位的父级盒子左边和上边的距离，注意：父级盒子必须要有定位，如果没有，则最终以body为准！

offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。

offsetParent

返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷

如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body； 如果当前元素的父级元素中有CSS定位（position：absolute或relative），offsetParent取最近的那个父级元素。

 offsetXXX 和 style.XXX的区别

a) style.left只能获取行内的，而offsetLeft则可以获取到所有的；
b) offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
c) offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
   注意：可以用parseInt进行转化；比如：styleLeft='300px' ---> parseInt(styleLft) ---> 300
d) offsetLeft是只读的，而style.left是可读写；    
e) 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。

---

2-scroll家族

 scroll家族有以下几个值

• 网页正文全文宽： document.body.scrollWidth;

• 网页正文全文高： document.body.scrollHeight;

• 网页被卷去的高： document.body.scrollTop;

• 网页被卷去的左： document.body.scrollLeft;

• 指定网页滚动到某个位置：scrollTo(x,y)

关于 Scroll家族的浏览器兼容写法

• ie9+ 和 最新浏览器

window.pageXOffset; （scrollLeft）

window.pageYOffset; （scrollTop）

• Firefox浏览器 和 其他浏览器

document.documentElement.scrollTop;

• Chrome浏览器 和 没有声明 DTD <DOCTYPE >

document.body.scrollTop;

• 兼容写法

var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;

scrollTo(x,y)

把内容滚动到指定的坐标

格式：scrollTo(xpos,ypos)

xpos 必需；要在窗口文档显示区左上角显示的文档的 x 坐标；

ypos 必需；要在窗口文档显示区左上角显示的文档的 y 坐标 。

网页大部分都没有水平滚动条，所以，这个x 不太常用。 

---

3-client家族

client家族有以下几个值

• 网页可见区域宽： document.body.clientWidth;
• 网页可见区域高： document.body.clientHeight;
• clientLeft和clientTop：返回的是元素边框的 borderWidth，如果不指定一个边框或者不定位改元素，其值就为0

offset、client和scroll的区别分析

left和top分析：

• clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
• offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
• scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度;

width和height分析

• clientWidth/Height: 内容 + 内边距

• offsetWidth/Height: 内容 + 内边距 + 边框

• scrollWidth/Height: 滚动内容的宽度和高度

 

 

---