分清JavaScript中的各种“尺寸”和“位置”

1. 尺寸

（1） node.style.width/height

这个只能获取元素的内联style样式中定义的尺寸值，若该元素没有定义style属性，则返回值为空字符串

此外，没有其他办法可以获取css样式设置的元素尺寸值

（2） node.clientWidth/clientHeight

表示元素的内容可视宽/高度 +水平/垂直方向padding值

注意:

• 针对纯行内元素(如apan，不包括行内块)该neI获取的值永远为0，
• 通过document documentElement.clientWidth/clientHeight可获取页面视口的尺寸

（3） node.offsetWidth/offsetHeight

表示元素的内容可视宽度/高度 +水平/垂直方向padding值 + 水平/垂直方向barder值

（4） node.scrollWidth/scrollHeight

表示元素的内容可视宽度/高度 +水平/垂直方向padding值+ 水平/垂直方向滚动或溢出部分内容宽度/高度

当不存在滚动溢出的内容时，该值与对应的ciientWidth/clientHeight一致

注意:

• 针对纯行内元素(如span，不包括行内块)该API获取的值永远为0。
• 通过document documentElement.scrollWidth/scrollHeight可获取页面视口的尺寸

（5） window.innerWidth/innerHeight和outerWidth/outerHeight

window.innerWidth/innerHeight表示当前页面的视口宽度/高度，一般跟document documentElement.clientWidth/clientHeight是等价的

window.outerWidth/outerHeight表示当前整个浏览器窗口的宽度/高度，即你打开的浏览器软件显示的宽度/高度

在移动端理想视口的情况下，一般innerWidth与outerWidth是相等的

（6） window.screen.width/height/availWidth/availHeight

screen.width/height返回屏幕宽度/高度的CSS像素值

screen.availWidth/availHeight返回当前浏览器在屏幕中的可用的宽度/高度的CSS像素值。或者理解为当前状态下浏览器可能的最大宽度/高度

screen.width不一定等于screen.availWidth。当有其他小工具占据了屏幕空间时，浏览器有时不能占用小工具（如任务栏）占据的空间。

（7） node.getBoundingClientRect()

该方法的返回值为一个对象，具有width和height两个尺寸属性

如果是标准盒子模型，元素的尺寸等于width/height + padding + border-width的总和。

如果box-sizing: border-box，元素的的尺寸等于 width/height。

2. 位置

（1） event.pageX/Y，screenX/Y，clientX/Y

这几个属性只来自于DOM事件Event对象

pageX/Y表示事件触发位置相对整体页面的左上角的位置（包括页面滚动距离）

screenX/Y表示事件触发位置相对屏幕的左上角的位置

clientX/Y表示事件触发位置相对当前页面可视区域的左上角的位置

（2） node.offsetTop/offsetLeft

表示当前节点相对最近的定位祖先元素的的顶部/左边界内边距的位置

（3） node.scrollTop/scrollLeft

表示当前节点元素内部被滚动的垂直/水平距离，前提是这个这个元素内部产生了滚动条，否则该值返回0

（4） node.style.left/top

这个只能获取元素的内联style样式中定义的left/top属性值，若该元素没有定义style属性，则返回值为空字符串

（5）node.getBoundingClientRect()

它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。