javascript中关于宽高、位置、坐标等相关属性和方法介绍

开篇前，我直接了当地写出几个常用的操作：

1.获取窗口右侧滚动条的宽度

window.innerwidth-document.documentelement.clientwidth

2.获取html元素的尺寸(包含边框和内边距)

element.offsetwidth和element.offsetheight

3.获取窗口滚动条的位置

document.documentelement.scrolltop和window.scrolly

4.获取文档的高度

window.innerheight+window.pageyoffset和window.innerheight+window.scrolly

5.获取元素相对于视口的偏移

element.getboundingclientrect().x和element.getboundingclientrect().y

6.获取元素相对于定位祖先元素的偏移：

element.offsetleft和element.offsettop

下面我就详细介绍文档和元素的几何形状和滚动

1.文档坐标和视口坐标

文档坐标：通俗点，就是可以滚动的页面的左上角为坐标原点。

视口坐标：不包括外壳(菜单栏、工具条等)的左上角为坐标原点。针对框架页面，视口是定义了框架的iframe元素。

2.在文档坐标和视口坐标间相互切换，就必须要引入滚动条位置。

对于浏览器窗口：pagexoffset/pageyoffset和scrollx/scrolly和document.documentelement.scrolltop/scrollleft.

对于内容超过视口而形成的带有滚动条的元素：scrollleft/scrolltop

3.查询元素的几何尺寸

判定元素的尺寸和位置最简单的方法就是调用它的getboundingclientrect()方法。它不需要参数，返回一个带有left\right\top\bottom属性的对象。四个属性值可组队形成坐标。记得这个方法返回元素在视口中的位置。对于内联元素形成的不规矩的形状使用这个方法时去包扣所有不规矩区域的最大矩形。不过也有一个getclientrects()方法，分别获取各个小矩形的方法，它和getboundingclientrect()用法一样。值得注意，这两个方法都不是实时的，不会再用户滚动或改变窗口大小时更新。

4.window对象的scrolltop()方法(和其同义scroll())接受一个点的文档坐标，使文档滚动到指定坐标出现在视口的左上角，如果指定的点太接近文档的下边沿或右边沿，浏览器将尽量保证它和视口的左上角最近。window的scrollby()的参数是指定相对偏移量。

5.任何html元素都拥有返回他们包含边框和内边距，不包含外边距的屏幕尺寸的offsetwidth和offsetheight属性。

6.任何html元素都拥有offsetleft和offsettop属性来返回元素的相对于定位祖先元素而言的x和y坐标。如果无定位祖先元素，则是文档坐标。

7.clientwidth/height类似offsetwidth/height,不同的是，它们不包含边框大小，只包含内容和内边距。如果有滚动条，也不包含。注意，类似于span等内联元素，返回值总是0.

在文档根元素上使用时，它们的返回值和窗口的innerwidth/height属性值相等。

8.scrollleft/top属性没啥用，它们返回元素的内边距外沿和边框外沿的距离，如果滚动天在左边或上边时也包括滚动条的宽度。

9.scrollwidth/height是元素的内容区域加上内边距和任何溢出内容的尺寸，如果没有溢出，则和clientwidth/height是相等的。

10.scrollleft/top指定滚动条的位置。