js中有一套方便的获取元素尺寸的办法就是offset家族:
offsetWidth offsetHeight offsetLeft offsetTop offsetParent共同组成了offset家族
offsetWidth = width + padding + border
offsetHeight = height + padding + border
offsetLeft 和 offsetTop:
返回距离上级带有定位的盒子左边的位置,如果父级元素没有定位,则以body为准
offsetLeft从父亲的padding开始算,父亲的border不算
offsetParent:返回该对象的带有定位的父级,如果当前元素的父级元素没有
进行CSS定位,则offsetParent为body.如果当前元素的父级元素中有定位,则
取最近的父级元素
offsetLeft和style.left的区别
一、最大区别在于offsetLeft可以返回没有定位的盒子距离左侧的位置
而style.left不可以。
二、offsetTop返回的是数字,而style.top返回的是字符串(24px),除了数字外,还
带有单位。
三、offsetTop只读,而style.top读写
四、如果没有给HTML元素设置top样式,style.top返回的是空字符串。
scroll家族主要包括scrollWidth、scrollHeight scrollLeft scrollTop onscroll事件
scrollWidth/scrollHeight是指内容的高度
scrollLeft/scrollTop指被卷去的左侧和头部(浏览器无法显示的部分)
一般调用document.body.scrollTop
on scroll滚动事件(window.onscroll = func)
屏幕每滚动一次,哪怕只有一个像素也会触发这个事件。这样就可以检测屏幕滚动了
只能有一个写了多个以最后一个为准,同理 window.onload
未声明 DTD(谷歌只认识他)(IE9+认识他)document.body.scrollTop
已经声明DTD(IE678只认识他)(IE9+任何时候)
document.documentElement.scrollTop
火狐/谷歌/ie9+以上支持的(不管DTD)
window.pageYOffset
滚动到指定位置:window.scrollTo 把内容滚动到指定的坐标
scrollTo(xpos,ypos)
xpos 必需。要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 必需。要在窗口文档显示区左上角显示的文档的 y 坐标
clientWidth:获取网页可视区域宽度
clientHeight:获取网页可视区域的高度
如果是盒子调用,指的是盒子本身
如果是body/html调用,指的是可视区域的大小
clientX:鼠标距离可视区域左侧距离(event调用)
clientY:鼠标距离可视区域上侧距离(event调用)
clientTop/clientLeft盒子的border宽高
client家族之:检浏览器宽/高度(可视区域)
ie9及其以上的版本
window.innerWidth/Height
标准模式(有DTD)(“CSS1Compat”)
document.documentElement.clientWidth
document.documentElement.clientHeight
怪异模式 (没有DTD)
document.body.clientWidth
document.body.clientHeight
三个家族的区别:
区别1:(offset/scroll/client宽高)
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
scrollWidth = 内容宽度(不包含border)
scrollHeight = 内容高度(不包含border)
区别2:(offset/scroll/client上下)
offsetTop/offsetLeft :
调用者:任意元素。(盒子为主)
嘛作用:距离父系盒子中带有定位的距离。
scrollTop/scrollLeft:(盒子也可以调用,必须有滚动条)
调用者:document.body.scrollTop/.....(window)
嘛作用:浏览器无法显示的部分(被卷去的部分)。
clientY/clientX:(clientTop/clientLeft 值的是border)
调用者:event.clientX(event)
嘛作用:鼠标距离浏览器可视区域的距离(左、上)。
触发DOM上的某个事件时,会产生一个事件对象event,这个对象中包含着所有与事件有关的信息。所有浏览器都支持event对象,但支持的方式不同。
比如鼠标操作时候,会添加鼠标位置的相关信息到事件对象中。(类似Date)
普通浏览器支持 event(传参)
ie 678 支持 window.event(无参)
常见属性
clientX/clientY
当前窗口的左上角为基准点
pageX/pageY低版本浏览器(IE67)不支持
以当前文档的左上角为基准点
screenX/screenY
当前屏幕的左上角为基准点
网友评论