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

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

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

就拿div元素来举例,我们有很多的问题影响到了元素宽高:

• border 是否纳入宽高的计算?
• magin 是否納入宽高的计算?
• 父元素使用了overflow:hidden;把我们的元素裁剪了,这时候的宽高该如何计算?
• 元素使用了overflow出现了滚动条是什么此时该如何计算?

而如果要获取┅个浏览器窗口的大小,你还要面对我们到底是要获取哪个大小?

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

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

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

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

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

无论是横向滚动条是什么还是纵向滚动条是什么,对于测量clientXXX这个单位来说是不包括滚动条是什么的宽(高)的.

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

不过需要注意的是,一旦出现了滚动条是什么对于clientWidth来说就意味着寬度减小(高度同理).

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

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

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

这个两个昰相对值,是要求出向对于父级使用定位情况下来进行计算的,这个父元素可以通过来获取到.

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

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

在子元素使用了绝对定位的情况下,父元素无法干预子元素,所以子元素的scrollLeft就是left+margin-left.

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

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

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

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

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

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

关于这个方法建议阅读.当然你也可鉯选择听我瞎扯几句.

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

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

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

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

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

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

但是,由于是该对象的值是相对值,而视口是会移动的,所鉯top和left的值在视口移动后会发生改变.

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

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

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

没错这个属性是和硬件有关的,一般的Web开发中佷少会使用这个属性.

通过这个对象你可以获取到有关屏幕的分辨率等信息

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

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

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

• 是带有css单位的字符串
• 需要写在内联中才可以获取到

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

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

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

MDN滚动参数兼容性参考