整理自撩课学院 www.itlike.com
一、offSet家族
1、概念
offSet 自己的，用于获取元素尺寸
1）offsetWidth 和 offsetHeight
获取对象自身的宽度和高度 ，包括内容、边框和内边距，即：offsetWidth = width + border + padding
2）offsetLeft 和 offsetTop
- 距离第一个有定位的父级盒子左边和上边的距离
- 父级盒子必须要有定位，如果没有，则最终以body为准！
- offsetLeft和offsetTop从从父标签的padding开始计算，不包括border。即：从子盒子边框到定位父盒子边框的距离。
3）offsetParent
- 返回当前对象的父级（带有定位）盒子，可能是父亲、也可能是爷爷
- 如果当前元素的父级元素没有进行CSS定位（position：absolute 或 relative），则其offsetParent为body
- 如果当前元素的父级元素中有进行CSS定位（position：absolute或relative），则其offsetParent取最近的那个父级元素
4）offsetXXX 和 style.XXX的区别
- style.left只能获取行内的，而offsetLeft则可以获取到所有的；
- offsetLeft 可以返回没有定位盒子距离左侧的位置；而style.left不可以，其只能返回有定位盒子的left;
- offsetLeft 返回的是数字，而 style.left 返回的是字符串，除了数字外还带有单位：px;
- offsetLeft是只读的，而style.left是可读写；
- 如果没有给 当前 元素指定过 top 样式，则 style.top 返回的是空字符串。
二、scroll家族
1、概念
- 网页正文全文宽： document.body.scrollWidth
- 网页正文全文高： document.body.scrollHeight
- 网页被卷去的高： document.body.scrollTop
- 网页被卷去的左： document.body.scrollLeft
- 注意：在实际开发中使用比较多的就是scrollTop
2、适配
1）ie9+ 和 最新浏览器
- window.pageXOffset; （scrollLeft）
- window.pageYOffset; （scrollTop）
2）Firefox浏览器 和 其他浏览器 - document.documentElement.scrollTop
3）Chrome浏览器 和 没有声明 DTD <DOCTYPE > - document.body.scrollTop
4）兼容写法 - var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
- var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3、scrollTo(x,y)
- 把内容滚动到指定的坐标
- 格式：scrollTo(xpos,ypos)
三、scroll家族
1、概念
1）clientWidth和clientHeight
- 网页可见区域宽： document.body.clientWidth;
- 网页可见区域高： document.body.clientHeight;
2）clientLeft和clientTop - 返回的是元素边框的borderWidth
- 如果不指定一个边框或者不定位该元素，其值就为0
2、offset、client和scroll的区别分析
1）left和top分析
- clientLeft: 左边边框的宽度；clientTop: 上边边框的宽度
- offsetLeft: 当前元素距离有定位的父盒子左边的距离；offsetTop: 当前元素距离有定位的父盒子上边的距离
- scrollLeft: 左边滚动的长度; scrollTop: 上边滚动的长度
2）width和height分析 - clientWidth/Height: 内容 + 内边距
- offsetWidth/Height: 内容 + 内边距 + 边框
-
scrollWidth/Height: 滚动内容的宽度和高度
宽度/高度.png
3）获取屏幕的可视区域
1）ie9及其以上的版本、最新浏览器
* window.innerWidth, window.innerHeight
2）标准模式浏览器
* document.documentElement.clientWidth, document.documentElement.clientHeight
3）怪异模式
- document.body.clientWidth, document.body.clientHeight
4）封装写法
function client() {
if(window.innerWidth){ // ie9及其以上的版本
return{
width: window.innerWidth,
height: window.innerHeight
}
}else if(document.compatMode !== 'CSS1Compat'){ // 怪异模式
return{
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
// 标准
return{
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
