三大家族(offset/scroll/client)
快速查看
scrollTop/Left一般都是应用于计算浏览器卷去的部分,而且有兼容性问题,所以下面会举例将他们封装起来
offsetHeight: 元素高,height+border+padding
offsetWidth: 元素宽,width+border+padding
offsetTop: 上边距离带有定位的父盒子的距离(重要)
offsetLeft: 左边距离带有定位的父盒子的距离(重要)
offsetParent: 最近的带有定位的父盒子
scrollHeight: 内容高,不含border(内容!!!)
scrollWidth: 内容宽,不含border (内容!!!)
scrollTop:
document.documentELement.scrollTop || document.body.scrollTop || window.pageXOffset;; (重要)
浏览器调用:浏览器页面被卷去的头部
元素调用:必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的头部
scrollLeft: document.documentELement.scrollLeft: || document.body.scrollLeft: ; (重要)window.pageYOffset;
浏览器调用:浏览器页面被卷去的左侧
元素调用:必须具有滚动条的盒子调用。盒子本身遮挡住的子盒子内容。子盒子被遮挡住的左侧
clientHeight: 元素高,height+padding;
window.innerHeight; document.body.clientHeight 可视区域的高
clientWidth: 元素宽,width+padding;
window.innerWidth; document.documentElementWidth; 可视区域的宽
clientTop: 元素的上border宽
clientLeft: 元素的左border宽
clientY 调用者:event.clientY(event)(重要)
作用:鼠标距离浏览器可视区域的距离,上
clientX 调用者:event.clientX(event)(重要)
作用:鼠标距离浏览器可视区域的距离,左
offsetLeft和style.left区别
一、最大区别在于offsetLeft可以返回没有定位盒子的距离左侧的位置。
而 style.left不可以
二、offsetTop 返回的是数字,而 style.top 返回的是字符串,除了数字外还带有单位:px。
style.left只能获取行内式,如果没有返回“”;
三、offsetTop 只读,而 style.top 可读写。(只读是获取值,可写是赋值)
四、如果没有给 HTML 元素指定过 top 样式,则style.top 返回的是空字符串。
1、offset家族 —表示偏移、位移的意思
offsetWidth
和offsetHight
、offsetLeft
和offsetTop
、offsetParent
共同组成了offset家族。
a、offsetHight /offsetWidth
offset宽/高 = 盒子自身的宽/高 + padding +border;
offsetWidth = width+padding+border;
offsetHeight = Height+padding+border;
b、offsetLeft和offsetTop
检测距离父盒子有定位的左/上面的距离,如果父级都没有定位则以body为准。
offsetLeft == style.left(去掉px)
c、offsetParent
offsetParent 取最近的那个带定位父级元素。
2、Scroll家族
ScrollWidth 和 scrollHeight(不包括border)---盒子内容的宽高。
(!!!如果有内容超出了,显示内容的高度)
1.7.2 scrollTop 和 scrollLeft---网页,被浏览器遮挡的头部和左边部分。
(!!!感觉都是由于在浏览器上,用在盒子上没有效果)
兼容性写法
var top = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
var left = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0;
3、onscroll事件
只要页面滚动就会触发
window.scrollTo
方法可把内容滚动到指定的坐标。
格式:
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标
client家族
1、clientWidth 获取网页可视区域宽度(两种用法)
clientHeight 获取网页可视区域高度(两种用法)
调用者不同,意义不同:
盒子调用: 指盒子本身。
body/html调用: 可视区域大小。
2、clientX 鼠标距离可视区域左侧距离(event调用)
clientY 鼠标距离可视区域上侧距离(event调用)
3、clientTop/clientLeft 盒子的border宽高