浏览器元素尺寸与位置查询指南

前言

这篇文章主要介绍了有关浏览器中获取坐标以及尺寸的几种途径,算是比较全的一篇文章了.

在浏览器中获取元素的坐标以及尺寸是很是容易的,有很是多种方式来完成这些需求,可是杂乱的API和不少兼容处理致使了浏览器中没有直接的方式来获取咱们想要的结果.

仔细想一想这个问题,为何浏览器并无直接提供一个简单的属性就告诉你浏览器窗口的大小,或者一个元素的宽高.

就拿div元素来举例,咱们有不少的问题影响到了元素宽高:

• border 是否归入宽高的计算?
• padding 是否归入宽高的计算?
• magin 是否归入宽高的计算?
• box-sizing:border-box; 时候该如何计算?
• 父元素使用了overflow:hidden;把咱们的元素裁剪了,这时候的宽高该如何计算?
• 元素使用了overflow出现了滚动条此时该如何计算?

而若是要获取一个浏览器窗口的大小,你还要面对咱们究竟是要获取哪一个大小?

• 屏幕大小?
• 浏览窗口大小?
• 浏览区域大小?
• 是否包含滚动条?

固然最终你还要面临一个兼容问题,致咱们敬爱的IE浏览器,不过本文可不探讨浏览器之间的差别.不过本文的涉及到的内容应该在IE9以上都是能够正常使用的(不过建议你仍是查下can i use 或者MDN).

浏览器部分

浏览器的宽高计算主要经过window对象来完成.

这个对象上提供了几个关键属性:

• window.innerWidth
• window.innerHeight
• window.outerWidth
• window.outerHeight

用人类语言来描述这几个属性就是.

属性名称	人类解释
innerWidth	获取页面可视区域的宽度包括右侧的滚动条(若是有的话).所谓的可视区域就是HTML页面的内容区域不包括浏览器自身的ui所占用的空间(地址栏和菜单栏等).
innerHeight	获取页面可视区域的高度包括底部的滚动条(若是有的话).解释同上.
outerWidth	获取浏览器窗口宽度.
outerHeight	获取浏览器窗口高度.

友情出演windows画图:

注意:单位均为px.

注意:滚动条并不视为浏览器的ui中的内容,而是视为内容区域的一部分,右侧默认的滚动条的宽度包含在window.innerWidth中,可是不属于html元素和html下的任何元素.

元素部分

属性

属性名称	人类解释
element.clientWidth	元素内容区域宽度+padding的宽度,若是宽度溢出且裁剪那么不包含被裁剪掉的部分.
element.scrollWidth	元素实际大小包括父元素出现滚动条后未被展现的部分,计算范围为padding+content和clientWidth一致
element.offsetWidth	至关于计算边框宽度的clientWidth,宽度计算为content+padding+border.
element.clientHeight	元素内容区域高度+padding的高度,若是高度溢出且裁剪那么不包含被裁剪掉的部分.
element.scrollHeight	当子元素高度溢出,这里提供的是子元素的高度包括溢出的部分,大小计算和clientHeight同样.
element.offsetHeight	至关于计算边框高度的clientHeight,高度计算为content+padding+border.
element.clientLeft	元素左边框的宽度
element.scrollLeft	计算较为复杂,看后续详解
element.offsetLeft	计算比较复杂,看下面详解
element.clientTop	元素上边框的宽度
element.scrollTop	计算较为复杂,看后续详解
element.offsetTop	计算比较复杂,看下面详解

滚动条的规律

不管是横向滚动条仍是纵向滚动条,对于测量clientXXX这个单位来讲是不包括滚动条的宽(高)的.

例如在下面这张图中咱们进行测量父元素(黑色区域)的clientWidth结果和子元素(红色区域)的clientWidth的大小是同样的.

不过须要注意的是,一旦出现了滚动条对于clientWidth来讲就意味着宽度减少(高度同理).

注意:图片所指的宽度是clientWidth

API名称	是否包含滚动条大小
offsetXXX	包含
clientXXX	不包含
scrollXXX	不包含

因此在margin:0;padding:0;border-width:0;状况下offsetWidth - clientWidth=滚动条的宽度.

经过这种方式我求出了chrome浏览器滚动条大小是17px整,可是不要忘记这些API只会返回整数.

注意:scrollXXX对于滚动条计算的规则和clientXXX表现一致.

含有box-sizing:border-box的计算

请记住,对于clientXXX来讲,元素的大小就是padding+content.

而使用border-box后元素的表现就是padding和border的修改就不会影响到元素的大小.

此时width是多少clientWidth就是多少,height同理.

可是不要忘记了边框不参与clientXXX的计算,因此border的修改并不会影响元素的宽高变化,那么那么当border变大,对应的clientXXX就变小.

一个元素设置了border-box:

box{
  width:100px;
  padding:20px;
  border:20px solid;
  box-sizing:border-box;
}

此时clientWidth= 100px - 20px*2(左右边框的宽度) = 60px

因为offsetXXX的计算是包含border的大小的,因此若是一个元素设置了border-box那么offsetWidth就等于元素的width大小,由于border被限制到了width中.

offsetTop和offsetLeft

子元素的offsetWidth|height是相对于父元素内容区域(padding+content)左侧和顶部的偏移量.

这个两个是相对值,是要求出向对于父级使用定位状况下来进行计算的,这个父元素能够经过HTMLElement.offsetParent来获取到.

例如:父级使用absolute或者relative.

注意:后文提出的父元素都指的是使用了相对定位的父元素.

注意:以上都是对于块级元素所描述的,对于行内元素或者td等元素相对的父元素不尽相同,这里不考虑这些状况,详情能够查看上方的连接.

状况1

在子元素使用了绝对定位的状况下,父元素没法干预子元素,因此子元素的scrollLeft就是left+margin-left.

状况2

第二种状况就是父元素和子元素都使用了相对定位,而相对定位是不脱离文档流的,那么父元素的padding-left就会影响到子元素的scrollLeft属性.

在线实例

注意:貌似offsetTop和Left在不一样浏览器下有不一样计算值,会带来兼容性问题,这里就不展开了,有兴趣的读者能够去查阅相关资料.

scrollTop和scrollLeft

首先scrollTop和scrollLeft是一对可读写的属性,这意味着你能够获取他的值也能够设置它从而控制滚动的距离.

注意:scrollTop|scrollLeft是用在含有滚动区域的元素上(图中黑色边框的元素),而不是被滚动的元素上测量,被滚动的元素scrollTop永远是0.

简单理解:在垂直方向上含有滚动条的元素的内容区域的顶部(padding+content)相对于自身顶部边框的底部向上移动的距离(水平方向同理).

就是scrollTop的大小(图中超出去的部分).

元素方法

getBoundingClientRect

关于这个方法建议阅读MDN的指南.固然你也能够选择听我瞎扯几句.

这个api是ie首先提出(早在ie4时候就有了)的这也是ie对web开发的贡献之一.

调用这个api会返回一个DOMRect对象,这个对象屡次易名,不过没有变化过基本概念.

当你调用这个方法的时候他会返回一个对象,该对象拥有以下几个属性:

• left
• top
• right
• bottom
• width
• height
• x
• y

注意:ie9+包括edge兼容width和height截止到2019年4月5日ie和edge不兼容x和y.

和属性返回的值有两点不一样:

• 返回的值都是相对值,相对于浏览器视口的左上角
• 返回的值包含小数部分,这意味着获取到的值更加精确

如何理解:

若是页面中只有一个1000px高100%宽的div(没有margin,padding,border),那它的bottom和height应该1000,left和top是0,right和width是元素宽度:

• 由于咱们指定了1000px因此他的height是1000,
  由于页面中只有这一个元素,他的内容区域底部到可视区域顶部的距离就是1000,因此bottom是1000.
• 由于页面中只有这一个元素,因此这个元素是贴着可视区域的顶端和左侧的,因此left和top这两个值都是0.
• div默认会铺满横向的空间,横向空间中只有咱们的div因此right到视口区域左侧的距离就是元素的宽度,也是当前可视区域的宽度.

注意:left,right,top,bottom指的是内容区域的边缘到视口左上角的距离,不包括border和margin,padding,若是指定了box-sizing:border-box;则也包括border和padding.

可是,因为是该对象的值是相对值,而视口是会移动的,因此top和left的值在视口移动后会发生改变.

图解:

注意:该属性返回的值也将滚动条视为宽度(纵向)和高度(横向)的一部分.

和getBoundingClientRect相似的还有另一个api叫作getClientRects.这个api做用起来稍微复杂一些,简单的做用于内联元素的时候二者有区别,首先它返回的是数组,包含这个内联元素全部行的DOMRect对象,当内联元素只有一行的时候这两个api表现同样的.

思否上一篇关于 getClientRects的讨论

https://segmentfault.com/q/10...

屏幕部分

这部分主要利用window.screen对象,这个对象抽象的表示当前使用的物理显示设备.

没错这个属性是和硬件有关的,通常的Web开发中不多会使用这个属性.

经过这个对象你能够获取到有关屏幕的分辨率等信息

这里就很少介绍了,附上一篇介绍详细的文章:

https://www.cnblogs.com/ndos/...

此外在windows上还有几个关于屏幕的属性:

名称	描述
screenLeft	浏览器窗口左侧到屏幕左边缘的距离
screenTop	浏览器窗口顶部到屏幕上边缘的距离
screenX	同screenLeft
screenY	同screenTop

计算样式

HTMLelement.style

使用样式来获取元素的大小以及定位是一种常见的操做,可是问题在于使用HTMLelement.style获取的内容:

• 是带有css单位的字符串
• 须要写在内联中才能够获取到

使用style获取元素的大小或者宽高无疑是方便的,这里返回的值和css模型是一致的.

window.getComputedStyle

这个API和HTMLelement.style类型,调用这个API返回CSSStyleDeclaration对象.

区别在于:

• 只读
• 可使用css完整的名称来获取样式,例如font-size
• 不只计算内联样式还包括样式表中的样式

注意:当元素的样式修改的时候对应的CSSStyleDeclaration也会实时同步,你不须要对一个元素进行连续获取.

滚动相关

属性

使用对象	API名称	描述
window	pageXoffset	视口相对于页面内容区域左侧的距离,在现代浏览器上该值可能返回一个双精度浮点型
window	pageYoffset	视口顶部于页面内容区域顶部的距离,在现代浏览器上该值可能返回一个双精度浮点型
window	scrollX	同pageXoffset
window	scrollY	同pageYoffset

MDN滚动参数兼容性参考

https://developer.mozilla.org...

方法

快速解释:

适用对象	API名称	描述
window	scrollBy	相对于当前的滚动位置进行滚动到指定的位置
window	scrollByLines	相对于当前的滚动位置按照行数进行滚动(非标准)
window	scrollByPages	相对于当前的滚动位置按照页数进行滚动(非标准)
window	scroll	绝对滚动到某个位置上
window	scrollTo	功能于scroll方法无异
window	scrollMaxX	获取水平方向滚动距离的极限(非标准)
window	scrollMaxY	获取垂直方向滚动距离的极限(非标准)
element	scrollTo	用在元素上的scrollTo方法,功能于window上的方法无异.
element	scrollBy	用在元素上的scrollBy方法,功能于window上的方法无异
element	scroll	用在元素上的scroll方法,功能于window上的方法无异.