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() | 返回元素的大小及其相对于浏览器视窗的位置。 |
getClientRects() | 返回数组, 数组中有很多个类似getBoundingClientRect 返回的对象,对象值含义与getBoundingClientRect相同, 该方法主要用于内联元素,内联元素有多少行,该方法返回的对象有多少个成员。这个方法主要用于判断行内元素是否换行,以及行内元素的每一行的位置偏移 |
scrollIntoView() | 让元素滚动到可视区域 |
js相关:
名称 | 理解 |
offsetWidth | width +左右padding + 左右border;返回的是 |
offsetHeight | Height + 上下padding + 上下border;返回的是数值,只读 |
offsetLeft | 返回当前元素与父辈元素之间的水平距离(不包括边框)。其中父辈元素的取法为: (1).若父辈元素中有 (2).若父辈元素中没有定位元素,那么就返回相对于 (3).若当前元素具有固定定位(position:fixed;),那么返回的是当前元素与 |
offsetTop | 返回当前元素与父辈元素之间的垂直距离(不包括边框)。其中父辈元素的取法为: (1).若父辈元素中有 (2).若父辈元素中没有定位元素,那么就返回相对于 (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)相关整理