DOM元素的位置、尺寸及更多的信息

一、基本概念

document.documentElement是整个DOM树的根节点，对应的元素就是html。下面将其称作根元素或根节点。

document.body，对应的元素是body

 

二、浏览器中的文档坐标系、视口坐标系

• 元素的位置是以像素度量的，向右代表X坐标的增加，向下代表Y坐标的增加。
• 但是，有两个不同的点作为坐标系的原点：元素的X和Y坐标可以相对于文档的左上角或者相对于在其中显示文档的视口的左上角。
• 针对框架页中显示的文档，视口是定义了框架页的元素。
• 视口坐标有时也叫窗口坐标。
• 如果文档比视口要小，或者说它还未出现滚动，则文档是的左上角就是视口的左上角，文档和视口坐标系是同一个。
• 要在两种坐标系之间互相转换，必须加上或减去滚动的偏移量。
• 文档坐标比视口坐标要更加基础，并且在用户滚动时它们不会发生变化。
• 在客户端编程中使用视口坐标是非常常见的。
• 当为鼠标事件注册事件处理程序函数时，报告的鼠标指针的坐标是在视口坐标系中的。
• 为了在坐标系之间互相转换，我们需要判定浏览器窗口的滚动条的位置。

 

三、关于元素的位置、尺寸及更多的信息

☆ 用于判断滚动条位置的属性

1.Window对象的pageXOffset和pageYOffset

2.IE（和所有现代浏览器）也可以通过scrollLeft和scrollTop（可写，可通过设置这两个属性改变滚动条的位置）

在IE中，标准模式下，通过查询文档的根节点（document.documentElement）来获取这些属性值。

         怪异模式下，必须在文档的元素（document.body）上查询它们。

以上两种属性同义，都是表示横向或纵向滚动条在窗体中已滚动的像素数。

 

☆ 用于获取HTML元素尺寸的属性

1.HTML元素的只读属性offsetWidth和offsetHeight，包含元素的边框和内边距，不含外边距。因为滚动条出现后会压缩内容区域，所以这两个属性也包括滚动条的宽度，但是不包含溢出的内容。

2.HTML元素的只读属性scrollWidth和scrollHeight，包含内容区域及任何溢出内容区域的内容、内边距，不含滚动条宽度、边框、外边距。（当内容正好和内容区域匹配而没有溢出时，这些属性与clientWidth和clientHeight是相等的。但当溢出时，它们就包含溢出的内容，返回值比clientWidth和clientHeight要大。）

3.HTML元素的只读属性clientWidth和clientHeight，包含元素未溢出的内容区域、内边距，不含溢出的内容、滚动条宽度、边框、外边距。（注意：内联元素的这两个值总是返回0）

    在文档的根节点（document.documentElement）上查询这两个属性时，它们的返回值和window的innerWidth和innerHeight属性值相等（实际上不一定相等，只有在浏览器没有出现滚动条时，二者相等。有滚动条时，根节点的clientWidth和clientHeight属性的值都不含滚动条的宽度）。

    对于IE的怪异模式，必须在文档的元素（document.body）上查询它们（与处于标准模式时的根节点的clientWidth和clientHeight属性的值相等）。

 

☆ 用于获取HTML元素文档坐标的属性

HTML元素的offsetLeft和offsetTop属性来返回元素的X和Y坐标。对于很多元素，这些值是文档坐标，并直接指定元素的位置。但对于已定位元素的后代元素和一些其他元素（如表格单元），这些属性返回的坐标是相对于祖先元素的而非文档。

offsetParent属性指定这两个属性所相对的父元素。如果offsetParent为null，这两个属性就都是文档坐标。

offsetParent属性表示已进行了相对或绝对定位的父元素。

这两个属性返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

这两个属性表示的是从offsetParent元素的左边框内边缘和上边框内边缘作为起点，到元素自身的左边框外边缘和上边框外边缘为终点，之间的距离。

 

☆ 没什么用的HTML元素属性

clientLeft和clientTop：它们返回元素的左边和上边的内边距的外边缘和它的边框的外边缘之间的水平距离和垂直距离。通常这些值就等于左边和上边的边框宽度。但是如果元素有滚动条，并且浏览器将这些滚动条的位置放置在左侧或顶部（不太常见），这两个值也就包含了滚动条的宽度。对于内联元素，clientLeft和clientTop总是为0。

 

☆ 相关方法

1.window对象的scrollTo()方法接受一个点的X和Y坐标（文档坐标），作为滚动条的偏移量设置它们。如果有可能的话，让这个文档坐标的点位于视口的左上角。

2.使文档中的某个元素在视口内可见，可以在需要显示的HTML元素上调用scrollIntoView()方法。

3.返回元素的视口坐标的方法：调用HTML元素的getBoundingClientRect()方法。

    这个方法在当前所有的浏览器中都实现了。

    这个方法可用于判断一个元素的尺寸和位置。

    这个方法不需要参数，返回一个有left、right、top、bottom属性的对象。left和top属性表示元素的左上角的X和Y坐标，right和bottom属性表示元素的右下角的X和Y坐标。

    这个方法返回元素在视口坐标中的位置。

    这个方法返回的坐标包含元素的边框和内边距，但不包含元素的外边距。

4.如果想查询内联元素每个独立的矩形，调用getClientRects()方法来获得一个只读的类数组对象，它的每个元素类似于getBoundingClientRect()返回的矩形对象。

 

☆ 其他

1.三对元素属性的内边距说明（clientWidth和clientHeight、offsetWidth和offsetHeight、scrollWidth和scrollHeight）

理论上，这三对元素都包含了元素的内边距

实际上，在测试的浏览器中，clientWidth和clientHeight、offsetWidth和offsetHeight都包含四周的内边距

实际上，在测试的浏览器中，对于元素的scrollWidth和scrollHeight属性

在IE8及以上版本、Firefox中，

如果没有横向或纵向滚动条（内容不多不足以产生滚动条）时，这两个属性分别包含左右和上下内边距的宽度；如果存在横向或纵向滚动条（内容足够多产生了滚动条）时，这两个属性只包含元素的左和上内边距，不含右和下的内边距

在IE6、Chrome中，不论有无横向或纵向滚动条，这两个属性都包含元素左右和上下的内边距

 

2.在给元素加载内容时，如果内容里包含了一些用来描述元素尺寸的属性，且这些属性输出的是这个元素自身的值，那么这些值输出的结果很可能是不对的。因为元素在加载内容时，这些属性的值还未稳定。提前读取这些属性，很有可能会返回不准确的值。所以建议等元素自身尺寸稳定后，再读取这些描述元素尺寸的属性。

举例，假设一个块级元素，设置了宽高样式以及overflow是auto的样式，同时假设这个元素还没有任何内容。

然后现在第一次为其加载一些足够多的内容，让它显示横向和纵向滚动条。

在加载的内容里假设包含了元素自身的这三对属性：clientWidth和clientHeight、offsetWidth和offsetHeight、scrollWidth和scrollHeight

在加载这些内容之后，你会发现clientWidth和clientHeight、scrollWidth和scrollHeight输出的数值包含了元素自身横向和纵向滚动条的宽度，理论上这两对属性不应含滚动条的宽度。

但是现在，如果在元素的外面读取此元素的这两对属性，你会发现这两对属性并没有包含横向和纵向滚动条的宽度。

而offsetWidth和offsetHeight这对属性，在这种元素样式设定下，两次读取到的值都是一致的。

 

3.浏览器滚动条的宽度，会随着不同类型浏览器，不同的系统主题而不同

四、window对象的尺寸、位置属性（以下都是只读属性）

innerHeight、innerWidth

浏览器视口的宽高，包含滚动条

IE6到IE8：不支持

IE9及以上版本、Chrome、Firefox：支持

 

outerHeight、outerWidth

这两个属性指明当前浏览器窗口的总高度和宽度，单位为像素，包括工具栏、滚动条、窗口边框等。

注：当点击了浏览器的最大化按钮，使浏览器最大化以后，这两个属性的值可能会比手动让浏览器窗口撑满屏幕的值要大。

IE6到IE8：不支持

IE9及以上版本、Chrome、Firefox：支持

 

pageXOffset、pageYOffset

当前文档滚过的向右（pageXOffset）和向下（pageYOffset）的像素值。

IE6到IE8：不支持

IE9及以上版本、Chrome、Firefox：支持

 

scrollLeft、scrollTop

与pageXOffset、pageYOffset含义等同

IE6到8：不支持pageXOffset、pageYOffset；浏览器出现滚动条时，document.documentElement的scrollLeft、scrollTop有值；document.body的scrollLeft、scrollTop值为0；

IE9及以上版本、Firefox：document.documentElement的scrollLeft、scrollTop分别与window的pageXOffset、pageYOffset相等；document.body的scrollLeft和scrollTop值为0

Chrome：document.body的scrollLeft、scrollTop分别与window的pageXOffset、pageYOffset相等；document.documentElement的scrollLeft和scrollTop值为0

 

screenLeft、screenTop

IE6及以上版本：当前浏览器的视口（仅视口）左上角在屏幕中的坐标。

Chrome：当前浏览器窗口的左上角在屏幕中的坐标。

Firefox：不支持

 

screenX、screenY

IE6到IE8：不支持

IE9及以上版本、Chrome、Firefox：当前浏览器窗口的左上角在屏幕中的坐标。

 

注：测试用：Firefox浏览器版本是43；Chrome浏览器版本是38.05；Opera现在的内核是webkit，与Chrome等同。

    IE6、IE8、IE9、IE10、IE11

转载于:https://www.cnblogs.com/Ceri/p/7670599.html