参考文献
segmentfault获取屏幕宽高
js中位置与大小的获取方法
深入理解客户区尺寸client
css clientheight、offsetheight、scrollheight详解
关于鼠标位置参考文献
clientX,offsetX,layerX,pageX,screenX,X鼠标位置全解
需要提前了解的知识点
- 在 DOM 术语中，client 总是指除边框（border）外的渲染盒子（内边距+内容大小）。offset 总是指包含边框的渲染盒子（边框+内边距+内容大小）clientTop 即为这两者的 Top 之差，即边框宽度
- 除了
html元素外滚动条是从border开始的
documentElement && body
documentElement 对应的html标签
body对应的是什么不用说了吧
clientHeight && clientWidth （可视区高度）
客户区大小指的是元素内容及其内边距所占据的空间大小
clientHeight = padding-top + height + padding-bottom
clientWidth = padding-left + width + padding-right
在chrome实际测试中：body的clientHeight包括了margin和border
clientWidth包括margin和border
documentElement的clientHeight和clientWidth包含了maring和border
在chrome中的测试结果发现：浏览器的滚动条，并不是在html元素的内部，而是在html元素margin的外部，这也是为什么document.documentElement.scrollTop/scrollLeft和document.documentElement.clientWidth/clientHeight不受html的margin和border的影响
document.body.clientHeight
17:49:29.017 1496
17:49:34.408 document.body.clientWidth
17:49:34.412 1354
17:49:45.289 document.body.style.border = "50px solid black";
17:49:45.294 "50px solid black"
17:49:54.891 document.body.clientWidth
17:49:54.893 1254
17:50:00.495 document.body.clientHeight
17:50:00.497 1496
17:50:14.902 document.documentElement.clientHeight
17:50:14.905 451
17:50:23.377 document.documentElement.clientWidth
17:50:23.378 1354
17:50:47.907 document.documentElement.style.border = "50px solid blue";
17:50:47.911 "50px solid blue"
17:50:56.567 document.documentElement.clientWidth
17:50:56.570 1354
17:51:04.695 document.documentElement.clientHeight
17:51:04.699 451
clientWidth/clientHeight属性返回元素节点的客户区宽度,滚动条宽度不计算在内
1.jpg
offsetWidth && offsetHeight
offsetWidth=(border-width)*2+(padding-left)+(width)+(padding-right)
offsetHeight=(border-width)*2+(padding-top)+(height)+(padding-bottom)
每次访问客户区client属性都需要重新计算，重复访问需要耗费大量的性能，所以要尽量避免重复访问这些属性。如果需要重复访问，则把它们的值保存在变量中，以提高性能
包括滚动条宽度或者高度
如果给元素设置了display:none，则客户区client属性都为0
offsetLeft && offsetTop
经过chrome的检测：
offsetTop表示元素的上外边框至offsetParent元素的上内边框之间的像素距离
offsetLeft表示元素的左外边框至offsetParent元素的左内边框之间的像素距离
对于css position:absolute中的定位：left和right是值得整个盒模型到父盒子内边框的距离
offsetParent
参考文献：
深入理解定位父级offsetParent及偏移大小
定位父级offsetParent的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况
- 元素自身有fixed定位，offsetParent的结果为null
- 当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null
- [注意]firefox浏览器有兼容性问题，firefox会返回body其他浏览器返回null
- 元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
- 元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
- <body>元素的parentNode是null
看几个关于offsetParent的应用场景
//获得距离`offsetParent`的距离
var top_rel_to_parent = ele.offsetTop;
var left_rel_to_parent = ele.offsetLeft;
//获得相对于页面的距离
function getNodePosition(node) {
var _node = node;
var top = left = 0;
while (node) {
if (node.tagName) {
top = top + node.offsetTop + node.clientTop;
left = left + node.offsetLeft + node.clientLeft;
node = node.offsetParent;
}
else {
node = node.parentNode;
}
}
return [top - _node.clientTop, left - _node.clientLeft];
}
//获得页面滚动的距离
function getScroll() {
if(typeof pageYOffset != 'undefined') {
return [pageYOffset, pageXOffset];
}
else {
var B = document.body;
var D = document.documentElement;
D = (D.clientHeight) ? D : B;
return [D.scrollTop, D.scrollLeft];
}
}
// 最后可以获得相对视口距离
var top_rel_to_viewport = top_rel_to_doc - getScroll()[0];
var left_rel_to_viewport = left_rel_to_doc - getScroll()[1];
window.screen.width && height
屏幕的宽高分辨率
window.screen.availWidth && availHeight
屏幕的可用分辨率（还不清楚对于不同系统指的是什么）
window.innerWidth && window.innerHeight
window.innerWidth与window.innerHeight：获得的是可视区域的宽高，但是window.innerWidth宽度包含了纵向滚动条的宽度，window.innerHeight高度包含了横向滚动条的高度(IE8以及低版本浏览器不支持)。
window.outerWidth && window.outerHeight
window.outerWidth与window.outerHeight：获得的是加上工具条与滚动条窗口的宽度与高度。
clientLeft && clientTop
返回边框宽度
在chrome中这两个量对于body,documentElement来说都是能正常取到的：
document.body.style.border = "50px solid black";
document.documentElement.style.border = "50px solid blue";
document.body.clientTop
17:52:17.529 50
17:52:27.093 document.body.clientLeft
17:52:27.094 50
17:52:35.874 document.documentElement.clientTop
17:52:35.880 50
如果display为inline时，clientLeft属性和clientTop属性都返回0
scrollTop && scrollLeft
当前元素的视口距离顶部的高度，和左边的距离
也可以说是滚动条，滚动的距离
pageYOffset && pageXOffset
相当于 document.documentElement.scrollTop 和 document.documentElement.scrollLeft
ele.getBoundingClientRect()
用于获取元素外边框相对于浏览器文档的位置参数(x, y)_值得注意的是，这一点对于chrome没有实现，对于ff已经实现了
offsetWidth,offsetHeight(width, height)
元素外边框相对于浏览器视口位置(top, left)
(x, y)的值应该是(left,top)加上window.pageXOffset, window.pageYOffset
scrollX && scrollY
为了跨浏览器兼容，请使用 window.pageXOffset 和 window.pageYOffset 代替 window.scrollX 和 window.scrollY。不能访问这些属性的脚本可以使用下面的代码：
// For scrollX
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollLeft == 'number' ? t : document.body).scrollLeft
// For scrollY
(((t = document.documentElement) || (t = document.body.parentNode))
&& typeof t.scrollTop == 'number' ? t : document.body).scrollTop
网友评论