元素大小与获取各种高度宽度距离总结-白红宇

前言

项目开发中经常需要用到元素大小，网页高度，视口高度，各种距离等等，本文总结了获取各种宽高、距离的方法。

元素大小

祭出这几张神图，简单明了又清晰?

各种方法总结

注意：这些方法都不考虑混杂模式，请确保你的文档在标准模式下（填写了正确的doctype）否则获取的值会不准。

1. 获取整个网页高度与宽度

代码说明

1. 火狐不兼容document.body，所以使用document.documentElement

2. 理论上没有滚动条时scrollHeight和clientHeight相同，事实上各种浏览器有不同的处理，所以最保险的方法是取这俩中最大者。

function getPagearea(){  return {      width: Math.max(document.documentElement.scrollWidth,             document.documentElement.clientWidth),      height: Math.max(document.documentElement.scrollHeight,              document.documentElement.clientHeight)  }}复制代码

PS：jq的话 $(document).height(); $(document).width();

2. 获取视口高度与宽度

代码说明

1. 同上，火狐不兼容document.body，所以使用document.documentElement

function getViewport() {　　 return {　　  　width: document.documentElement.clientWidth,　　  　height: document.documentElement.clientHeight　　 }}复制代码

PS：jq的话 $(window).height(); $(window).width();

3. 获取元素距页面高度

function getElementTop(el) {　let actualTop = el.offsetTop;　let current = el.offsetParent;　  while (current !== null) {　　　actualTop += current.offsetTop;　　　current = current.offsetParent;　}　return actualTop;}复制代码

PS：jq的话 jq对象.offset().top jq对象.offset().left

4. 获取元素到视口的距离

使用方法

getBoundingClientRect方法返回元素的大小及其相对于视口的位置。

5. 获取纵向滚动条高度或横向滚动条长度

代码说明

同1，火狐不兼容document.body，所以使用document.documentElement

function getScrollTop() {     let doc = document;     return Math.max(doc.body.scrollTop, doc.documentElement.scrollTop)};function getScrollLeft() {     let doc = document;     return Math.max(doc.body.scrollLeft, doc.documentElement.scrollLeft)};复制代码

6. 获取鼠标到元素、视口、文档、屏幕距离

这种主要是读取event对象中的值，具体看下图比较清晰。

一个使用例子

上下滚动时判断元素在视口中出现

这个例子使用到了上面的方法

document.onscroll = () => {    let dom = document.getElementById('box');    let top = getElementTop(dom); // 元素距页面高度    let scrollTop = getScrollTop(); // 获取滚动条高度    let viewPortHeight = getViewport().height; // 获取视口宽高    if (top > scrollTop && top <= scrollTop + viewPortHeight) {         console.log('元素出现')    }}// 写法2：配合getBoundingClientRect判断document.onscroll = () => {  let dom = document.getElementById('box2');  let rectTop = dom.getBoundingClientRect().top;  let viewPortHeight = getViewport().height;    if (rectTop > 0 && rectTop < viewPortHeight) {      console.log('元素出现')  }}// 用jq的话document.onscroll = () => {  let $dom = $('#box');  let top = $dom.offset().top;  let scrollTop = $(window).scrollTop();  let viewPortHeight = $(window).height();    if (top > scrollTop && top <= scrollTop + viewPort.height) {      console.log('元素出现')  }}复制代码