元素宽度client*、offset*、scroll*等

window属性：

名称	理解
window.innerWidth	视口宽度，width + padding + border + 文档纵向滚动条宽度,只读
window.innerHeight	视口height + padding + border + 文档横向滚动条高度，只读
window.pageXOffset	整个页面水平方向滚动的像素值，只读
window. pageYOffset	整个页面垂直方向滚动的像素值，只读
window.screenX	浏览器窗口在显示器中的水平位置
window.screenY	浏览器窗口在显示器中的垂直位置
window.outerwidth	width + padding + border + 纵向滚动条宽度
window.outerHeight	height + padding + border + 横向滚动条高度 + 工具条高度

document方法：

名称	理解
elementFromPoint(x,y)	返回给定坐标(x,y)处所在的元素，该方法选择在指定坐标的最上层和最里层的Element对象(最上层是指z-index最大的元素；最里层是指最里层的子元素)
getBoundingClientRect()	返回元素的大小及其相对于浏览器视窗的位置。 它们的值是相对于视口的，而不是绝对的，当滚动位置发生了改变，top和left属性值就会随之立即发生变化,滚动到视口，那么top为0
getClientRects()	返回数组，数组中有很多个类似getBoundingClientRect返回的对象，对象值含义与getBoundingClientRect相同，该方法主要用于内联元素，内联元素有多少行，该方法返回的对象有多少个成员。这个方法主要用于判断行内元素是否换行，以及行内元素的每一行的位置偏移
scrollIntoView()	让元素滚动到可视区域

 

js相关： 

名称	理解
offsetWidth	width +左右padding + 左右border；返回的是数值，只读
offsetHeight	Height + 上下padding + 上下border；返回的是数值，只读
offsetLeft	返回当前元素与父辈元素之间的水平距离（不包括边框）。其中父辈元素的取法为： (1).若父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素的距离。 (2).若父辈元素中没有定位元素，那么就返回相对于body的距离。 (3).若当前元素具有固定定位(position:fixed;)，那么返回的是当前元素与可视窗口的距离
offsetTop	返回当前元素与父辈元素之间的垂直距离（不包括边框）。其中父辈元素的取法为： (1).若父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素的距离。 (2).若父辈元素中没有定位元素，那么就返回相对于body的距离。 (3).若当前元素具有固定定位(position:fixed;)，那么返回的是当前元素与可视窗口的距离
offsetX	当鼠标事件发生时，鼠标相对于事件源x轴的位置
offsetY	当鼠标事件发生时，鼠标相对于事件源y轴的位置

名称	理解
style.width	只有width；返回的是带px的字符串（例如300px），可读写,设置了 box-sizing 为border-box后，width() 获取的是 css 设置的width 加padding 和 border 的值
style.height	只有height ;返回的是带px的字符串（例如300px），可读写;设置了 box-sizing 为border-box后，height() 获取的是 css 设置的height 加padding 和 border 的值
style.left	定位元素与包含它的矩形左边界的偏移量,其实就等同于css的left
style.top	返回的是带px的字符串（例如300px），可读写,如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串,其实就等同于css的top

 

名称	理解
scrollWidth	width+左右padding
scrollHeight	可照上图类推
scrollLeft	读取或设置元素滚动条到元素左边的距离
scrollTop	读取或设置元素滚动条到元素顶边的距离
screenX	当鼠标事件发生时，鼠标相对于显示器屏幕x轴的位置；
screenY	当鼠标事件发生时，鼠标相对于显示器屏幕y轴的位置；
pageX	当鼠标事件发生时，鼠标相对于document x轴的位置；
pageY	当鼠标事件发生时，鼠标相对于document y轴的位置；

 

名称	理解
clientWidth	获取网页可视区域宽度
clientHeight	获取网页可视区域高度
clientX	相对文档的水平座标，当鼠标事件发生时（不管是onclick，还是omousemove，onmouseover等），鼠标相对于浏览器（这里说的是浏览器的有效区域）x轴的位置
clientY	相对文档的垂直座标，当鼠标事件发生时，鼠标相对于浏览器（这里说的是浏览器的有效区域）y轴的位置；
clientLeft	元素的内边距的外边缘和边框的外边缘的距离，实际就是边框的左边框宽度
clientTop	同理边框的上边框的宽度

 

jquery相关：

名称	理解
$(obj).width()	只有width；返回的是数字，可读写，设置了 box-sizing 为border-box后，width() 获取的是 css 设置的 width 减去 padding 和 border 的值
$(obj).height()	只有height ;返回的是数字，可读写，设置了 box-sizing 为border-box后，height() 获取的是 css 设置的 height 减去 padding 和 border 的值
$(obj).innerWidth()	width+左右padding；返回的是数字，可读写
$(obj).innerHeight()	height+上下padding ;返回的是数字，可读写
$(obj).outerWidth()	width+左右padding+左右border；返回的是数字，可读写，$(obj).outerWidth(true)会把margin也算进去
$(obj).outerHeight()	height+上下padding+上下border;返回的是数字，可读写，$(obj).outerHeight(true)会把margin也算进去
$(obj).scrollLeft()	读取或设置元素滚动条到元素左边的距离
$(obj).scrollTop()	读取或设置元素滚动条到元素顶边的距离

参考文档：

web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别 

CSSOM视图模式(CSSOM View Module)相关整理