html 相对高度,关于js各种dom高度及相对位置 & 鼠标位置

需要提前了解的知识点

在 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的定义是：与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况

元素自身有fixed定位，offsetParent的结果为null

当元素自身有fixed固定定位时，我们知道固定定位的元素相对于视口进行定位，此时没有定位父级，offsetParent的结果为null

[注意]firefox浏览器有兼容性问题，firefox会返回body其他浏览器返回null

元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为

元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素

看几个关于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

待整理

网页可见区域宽：document.body.clientWidth

网页可见区域高：document.body.clientHeight

网页可见区域宽：document.body.offsetWidth (包括边线的宽)

网页可见区域高：document.body.offsetHeight (包括边线的宽)

网页正文全文宽：document.body.scrollWidth

网页正文全文高：document.body.scrollHeight

网页被卷去的高：document.body.scrollTop

网页被卷去的左：document.body.scrollLeft

网页正文部分上：window.screenTop

网页正文部分左：window.screenLeft

屏幕分辨率的高：window.screen.height

屏幕分辨率的宽：window.screen.width

屏幕可用工作区高度：window.screen.availHeight

屏幕可用工作区宽度：window.screen.availWidth

HTML精确定位:scrollLeft,scrollWidth,clientWidth,offsetWidth

scrollHeight: 获取对象的滚动高度。

scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离

scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

scrollWidth:获取对象的滚动宽度

offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度

offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置

offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置

event.clientX 相对文档的水平座标

event.clientY 相对文档的垂直座标

event.offsetX 相对容器的水平坐标

event.offsetY 相对容器的垂直坐标

document.documentElement.scrollTop 垂直方向滚动的值

event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量

IE，FireFox 差异如下：

IE6.0、FF1.06+：

clientWidth = width + padding

clientHeight = height + padding

offsetWidth = width + padding + border

offsetHeight = height + padding + border

IE5.0/5.5：

clientWidth = width - border

clientHeight = height - border

offsetWidth = width

offsetHeight = height

(需要提一下：CSS中的margin属性，与clientWidth、offsetWidth、clientHeight、offsetHeight均无关)

网页可见区域宽： document.body.clientWidth

网页可见区域高： document.body.clientHeight

网页可见区域宽： document.body.offsetWidth (包括边线的宽)

网页可见区域高： document.body.offsetHeight (包括边线的高)

网页正文全文宽： document.body.scrollWidth

网页正文全文高： document.body.scrollHeight

网页被卷去的高： document.body.scrollTop

网页被卷去的左： document.body.scrollLeft

网页正文部分上： window.screenTop

网页正文部分左： window.screenLeft

屏幕分辨率的高： window.screen.height

屏幕分辨率的宽： window.screen.width

屏幕可用工作区高度： window.screen.availHeight

屏幕可用工作区宽度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技术要点

本节代码主要使用了Document对象关于窗口的一些属性，这些属性的主要功能和用法如下。

要得到窗口的尺寸，对于不同的浏览器，需要使用不同的属性和方法：若要检测窗口的真实尺寸，在Netscape下需要使用Window的属性；在IE下需要 深入Document内部对body进行检测；在DOM环境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window对象的innerWidth属性包含当前窗口的内部宽度。Window对象的innerHeight属性包含当前窗口的内部高度。

Document对象的body属性对应HTML文档的标签。Document对象的documentElement属性则表示HTML文档的根节点。

document.body.clientHeight表示HTML文档所在窗口的当前高度。document.body. clientWidth表示HTML文档所在窗口的当前宽度。