JS中的“尺寸和坐标”

先说一句
  大家好，这里是沉曦！一个前端的小学生。
  无论在学习还是开发中，常常要对元素的位置或元素宽高进行一系列的操作；但是有时目标元素的坐标或宽高不能第一时间获取，还需要经过自己某种计算这些坐标；但其实，你知道吗？js中有多种获取不同情况下的坐标位置和宽高尺寸；它可以做到帮你省略不必要的计算，一步到位。我们这就来“整”？

三个系列

为了学习和区分，JS的追求者们它们分成了三个系列：

• e 系列
• 三大家族系列（offset、client、scroll）
• window 系列

系列阐述

e系列

主要用于鼠标事件触发时，鼠标位置坐标的获取。

e系列	作用
clientX	返回当事件被触发时，鼠标指针相对于浏览器的有效区域的水平方向坐标。
clientY	返回当事件被触发时，鼠标指针相对于浏览器的有效区域的垂直方向坐标。
screenX	返回当事件被触发时，鼠标指针相对于显示器屏幕x轴的水平坐标。
screenY	返回当事件被触发时，鼠标指针相对于显示器屏幕y轴的垂直坐标。
offsetX	返回当事件被触发时，鼠标相对于事件源x轴的位置
offsetY	返回当事件被触发时，鼠标相对于事件源y轴的位置
e.pageX：	鼠标相对于文档水平方向的距离( ie678 不支持)
e.pageY：	鼠标相对于文档垂直方向的距离( ie678 不支持)

三大家族系列

主要用于dom元素的位置坐标及宽高尺寸的获取。

元素偏移量offset系列

offset 翻译过来就是偏移量， 我们使用 offset系列相关属性可以动态的得到该元素的位置（偏移）、大小等。

1. 获得元素距离带有非静态定位父元素的位置
2. 获得元素自身的大小（宽度高度）
3. 注意:返回的数值都不带单位

offset系列属性	作用
element.offsetParent	返回作为该元素带有"非静态定位最近"的父辈元素 如果父辈元素都没有非静态定位则返回"body"元素
element.offsetTop	返回元素相对带有"非静态定位"父辈元素上方的偏移量 如果父辈都没有定位则返回相对"body"的"上方"偏移量
element.offsetLeft	返回元素相对带有"非静态定位"父辈元素左方的偏移量如果父辈都没有定位则返回相对"body"的"左"方偏移量
element.offsetWidth	返回自身包括padding、边框、内容区的总宽度 , 返回数值不带单位 其实就是盒子的真实宽度
element.offsetHeight	返回自身包括padding、边框、内容区的总高度 , 返回数值不带单位 其实就是盒子的真实高度

特别注意:

如果元素不显示 offsetTop 跟 offsetLeft 无法获得具体的值； offsetWidth 跟 offsetHeight 也是同理；（ 元素在 浏览器处于显示状态,才能取得有效的值)

如果元素的图片元素,最好在window.onload完成之后在获取图片的offsetWidth跟offsetHeight, 否则有可能出现获取offsetWidth跟offsetHeight值为0的情况 。

插一下话：offset 与 style 区别

offset

• offset 可以得到任意样式表中的样式值
• offset 系列获得的数值是没有单位的
• offsetWidth 包含padding+border+width
• offsetWidth 等属性是只读属性，只能获取不能赋值
• 所以，我们想要获取元素大小位置，用offset更合适

style

• style 只能得到行内样式表中的样式值
• style.width 获得的是带有单位的字符串
• style.width 获得不包含padding和border 的值
• style.width 是可读写属性，可以获取也可以赋值
• 所以，我们想要给元素更改值，则需要用style改变

元素可视区 client 系列

client 翻译过来就是客户端，我们使用 client 系列的相关属性来获取元素可视区的相关信息。通过 client系列的相关属性可以动态的得到该元素的边框大小、元素大小等。

client系列属性	作用
element.clientTop	返回上边框的大小
element.clientLeft	返回左边框的大小
element.clientWidth	返回自身包括padding、内容区宽度 ,不含边框 , 返回数值不带单位
element.clientHeight	返回自身包括padding、内容区高度 ,不含边框 , 返回数值不带单位

**注意:**clientTop可以获取上边框的大小,clientLeft可以获取左边框的大小,没有clientBottom跟clientRight

小结: client 宽度 和我们offsetWidth 最大的区别就是 不包含边框

不可视区 scroll系列

scroll系列属性	作用
element.crollWidth	元素中内容的实际高，并不是元素的宽;当元素中没有内容，或内容很少时，才得到元素的宽，不包含border。此宽高为元素的实际宽，即包含因滚动而隐藏在浏览器可视区外的内容。
element.scrollHeight	元素中内容的实际宽，并不是元素的高;当元素中没有内容，或内容很少时，才得到元素的高，不包含border。此宽高为元素的实际高，即包含因滚动而隐藏在浏览器可视区外的内容。
element.scrollLeft	计算元素卷曲出去的left值。
element.scrollTop	计算元素卷曲出去的top值

（谷歌只认识他）（火狐IE9+认识他）认为是页面的body卷曲出去 document.body.scrollTop/scrollLeft
（IE678只认识他）(火狐IE9+认识他)认为是页面的HTML文档卷曲出去 document.documentElement.scrollTop/scrollLeft
**（推荐使用）**火狐/谷歌/ie9+以上支持的(不管DTD) window.pageXOffest/pageYOffest

window

window系列	作用
window.innerHeight	浏览器窗口的内部高度
window.innerWidth	浏览器窗口的内部宽度
window.pageXOffset	设置或返回文档在窗口左上角水平方向滚动的像素
window.pageYOffset	设置或返回文档在窗口左上角垂直方向滚动的像素

有三种方法能够获取浏览器窗口的尺寸（浏览器的窗口，不包括工具栏和滚动条）。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度
• window.innerWidth - 浏览器窗口的内部宽度

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

获取浏览器窗口滚动的尺寸

pageXOffset 和 pageYOffset 属性

返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。

pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

这些属性是只读的。

总结

最后一句

这是小沉曦参考其他小编加上自己理解的学习心得！若有不正，还望斧正。希望渴望正义的你们不要吝啬对我的建议哟,回见。