一、Offset家族
offser家族的成员,获取的值都是经过四舍五入得到的值,表示的是位移
如:
div.style.left = "156.4px";
//当获取div的offsetLeft值时,将值进行四舍五入
console.log(div.offsetLeft);//将会得到——156
div.style.left = "156.7px";
//当获取div的offsetLeft值时
console.log(div.offsetLeft);//将会得到——157
1. Offset的五个成员:
offsetWidth(width+border+padding)
表示该元素除去外边距之后的宽度 (不包含margin)
offsetHeight(height+border+padding)
表示该元素除去外边距之后的高度(不包含margin)
offsetLeft
表示距离有定位的父级的left值(若无定位,以body为参照)
offsetTop
表示距离有定位的父级的top值(若无定位,以body为参照)
offsetParent
返回有定位的父级(若没有定位则为body)
2. offsetLeft和style.left的区别
- (最大区别)
- offsetLeft可以返回没有定位盒子的距离左侧的位置(返回的是距离带有定位的父系盒子的left值)。
- 如果父系盒子中都没有定位,以body为准。
- style.left只能获取行内样式的值,不能获取CSS或JS中的left值,如果没有返回空字符串。
返回值
- offsetTop 返回的是数字,而 style.top 返回的是字符串
- 除了数字外还带有单位:px。
- 例如: div.offsetLeft = 100; div.style.left = “100px”;
offsetTop 只读,而 style.top 可读写。
- style.left和style.top可以赋值,可以获取值
- offsetLeft和offsetTop只能获取值
如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
二、scroll家族
1. scroll家族成员:
scrollWidth: 表示的是除去border的盒子宽度
- scrollWidth=width+padding
scrollHeight
① 当盒子内容超出了盒子的高度,scrollHeight=盒子内容的高度
② 当盒子内容高度<=盒子的高度,scrollHeight=盒子的高度
scrollTop 和 scrollLeft
① scrollTop表示的是页面被浏览器遮挡的头部
页面向下滑动了多少像素
② scrollLeft表示的是页面被浏览器遮挡的左边部分
页面向右滑动了多少像素
//利用window.onscroll来获取
window.onscroll = function () {
document.title = document.body.scrollTop+" "+document.body.scrollLeft;
}
2. scrollTop和scrollLeft的兼容问题
- 一、未声明 DTD(谷歌只认识他)
document.body.scrollTop;
- 二、已经声明DTD(IE678只认识他)
document.documentElement.scrollTop;
- 三、火狐/谷歌/ie9+以上支持的
window.pageYOffset;
例如:
// 没有dtd约束的
document.title = document.body.scrollTop;
//有dtd约束的
document.title = document.documentElement.scrollTop;
3. 兼容写法
document.title = window.pageYOffset ||document.body.scrollTop ||document.documentElement.scrollTop;
4. 补充: compatMode的用法
用于判断页面是否有DTD
- 声明了DTD——compatMode==CSS1Compat
- 没声明DTD——compatMode==BackCompat
alert(document.compatMode);//判断页面是否有dtd
5. window.scrollTo()方法可把内容滚动到指定的坐标。
格式:
scrollTo(xpos,ypos);
//xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
//ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标
6. scroll()方法的封装
function scroll() {
//直接return一个json对象
return {
"left":window.pageXOffset || document.documentElement.left || document.body.scrollLeft,
"top":window.pageYOffset || document.documentElement.top || document.body.scrollLeft
};
}
调用时,直接用scroll().top和scroll().left获得值,即可。
三、 client家族
1. clientY和clientX表示的是鼠标在可视区域的坐标值
- clientX:鼠标距离可视区域左侧距离(event调用)
- clientY:鼠标距离可视区域上侧距离(event调用)
2. 重点: clientWidth和clientHeight (调用者不同,意义不同)
- clientWidth: 获取网页可视区域宽度
clientHeight:获取网页可视区域高度
- 盒子调用: padding+(width/height)
- body/html调用:表示浏览器可视区域的大小
3. clientTop和clientLeft 表示的是盒子的border的宽高
4. client家族的特殊用法:检测浏览器(可视区域)的宽/高度
//获取浏览器可视区域的宽高的兼容性写法
function client() {
if(window.innerHeight !== undefined){
return {
"height":window.innerHeight,
"width":window.innerWidth
}
}else if(document.compatMode == "CSS1Compat"){
return {
"height":document.documentElement.clientHeight,
"width":document.documentElement.clientWidth
}
}else {
return {
"height":document.body.clientHeight,
"width":document.body.clientWidth
}
}
}
5. pageY和screenY和clientY之间的区别
1.event.pageY
表示单击时的位置距离body顶部的top值
2.event.screenY
表示单击时的位置距离屏幕顶部的位置,当移动缩放浏览器窗口时,event.screenY值会随着改变
3.event.clientY
表示单击时的位置距离浏览器可视区域的top值
6. (补充知识) onresize()事件
只要浏览器的大小改变,就会触动该事件的发生
window.onresize()
7. (补充知识)获取屏幕宽高(分辨率)
获取所用设备的分辨率
- window.screen.width:屏幕的宽度
- window.screen.height: 屏幕的高度