整理获取 viewport 和 element 尺寸和位置方法

dinfer 发布于2019-08-23 16:54 / 2619人阅读

摘要：整理获取和尺寸和位置方法更多前端技术和知识点，搜索订阅号菌订阅视口页面或窗口的位置和宽高获取视口宽高下面方法是包括滚动条的宽高，不支持滚动条另外浏览器兼容差，可获取包括工具栏的宽高页面滚动位置返回整个页面的滚动的位置，与返回的值一致，前者是

整理获取 viewport 和 element 尺寸和位置方法

⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌 订阅

视口页面或窗口的位置和宽高 获取视口宽高

下面方法是包括滚动条的宽高，不支持 IE8

window.innerWidth
window.innerHeight

width + padding + border + 滚动条 另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高

页面滚动位置

返回整个页面的滚动的位置，pageYOffset/pageXOffset 与 scrollY/scrollX 返回的值一致，前者是后者的别名，建议使用前者，不支持 IE8

window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

窗口在显示器的位置

标准浏览器使用的是 screenX/screenY，IE 中使用的是 screenLeft/screenTop

window.screenLeft || window.screenX
window.screenTop || window.screenY

元素几何尺寸和位置 元素占用的空间尺寸和位置

getBoundingClientRect

使用方法 getBoundingClientRect() 返回的值见下图：

IE 只返回 top right bottom left 四个值，如果需要 width height 则需要计算：

function getBoundingClientRect(elem) {
    let rect = elem.getBoundingClientRect()
    return {
        top: rect.top,
        right: rect.right,
        bottom: rect.bottom,
        left: rect.left,
        width: rect.width || rect.right - rect.left,
        height: rect.height || rect.bottom - rect.top
    }
}

clientWidth/clientHeight

返回元素不含滚动条的尺寸，不包括边框

document.documentElement.clientWidth || document.body.clientWidth
document.documentElement.clientHeight || document.body.clientHeight

如果是 document.documentElement，那么返回的是不包含滚动条的视口尺寸

如果是 document.body，并且是在混杂模式下，那么返回的是不包含滚动条的视口尺寸

clientLeft/clientTop

返回的是计算后的 CSS 样式的 border-left-width/border-top-width 的值，就是边框的宽度

offsetWidth/offsetHeight

同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸，这个方法返回元素本身的宽高 + padding + border + 滚动条

offsetLeft/offsetTop

相对于最近的祖先定位元素（CSS position 属性被设置为 relative、absolute 或 fixed 的元素）的左右偏移值

offsetLeft/offsetTop 返回元素 X Y 坐标值

计算元素的位置：

function getElementPosition(e) {
    var x = 0, y = 0;
    while (e != null) {
        x += e.offsetLeft;
        y += e.offsetTop;
        e = e.offsetParent; // 获取最近的祖先定位元素
    }
    return {
        x: x,
        y: y
    };
}

元素内容的宽高和滚动距离

scrollWidth/scrollHeight

这个方法返回元素内容区域的宽高 + padding + 溢出内容尺寸

document.documentElement.scrollWidth || document.body.scrollWidth
document.documentElement.scrollHeight || document.body.scrollHeight

如果元素是 document.documentElement，返回的是视口滚动区域宽度和视口宽度中较大的那个

如果元素是 document.body，并且是在混杂模式下，那么返回的是视口滚动区域宽度和视口宽度中较大的那个

scrollLeft/scrollTop

这个方法返回元素滚动条的位置

如果元素是根元素，那么返回 window.scrollY 的值

如果元素是 body，并且在混杂模式下，那么返回的是 window.scrollY 的值

因此可用于处理页面滚动的距离的兼容

请关注我的订阅号，不定期推送有关 JS 的技术文章，只谈技术不谈八卦

云服务器 GPU云服务器 asp整理目录和文件服务器机柜和网络机柜尺寸矩形和圆位置关系 ecs windows系统hosts文件的作用和位置

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/103494.html

css溢出机制探究

摘要：为什么需要深入学习溢出机制在实际开发的过程中，内容溢出是经常见到的。溢出当一个盒子的内容子元素孙子元素等后裔超过盒子本身的大小的时候，就会出现溢出。这个时候属性决定如何处理溢出。为什么需要深入学习CSS溢出机制？在实际开发的过程中，内容溢出是经常见到的。如果不深入了解这个机制，你经常会碰到这样的问题：为什么这个元素没有受到祖先元素的overflow:hidden的影响？这里出现的滚...

wangbinke 2019-08-30 15:54 评论0 收藏0
C1:DOM 元素的尺寸和位置

摘要：元素的尺寸和位置元素的尺寸包括内容区宽高不包括如果元素的是那么此时设置的就是该元素的也就是等于内容区的宽高滚动条。元素的位置使用我们可以得到元素相对于的位置。还有一种方法可以得到元素相对于最近定位的祖先元素的位置，就是使用和属性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不...

NusterCache 2019-08-30 13:55 评论0 收藏0
C1:DOM 元素的尺寸和位置

摘要：元素的尺寸和位置元素的尺寸包括内容区宽高不包括如果元素的是那么此时设置的就是该元素的也就是等于内容区的宽高滚动条。元素的位置使用我们可以得到元素相对于的位置。还有一种方法可以得到元素相对于最近定位的祖先元素的位置，就是使用和属性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不...

Airmusic 2019-08-26 11:37 评论0 收藏0
C1:DOM 元素的尺寸和位置

摘要：元素的尺寸和位置元素的尺寸包括内容区宽高不包括如果元素的是那么此时设置的就是该元素的也就是等于内容区的宽高滚动条。元素的位置使用我们可以得到元素相对于的位置。还有一种方法可以得到元素相对于最近定位的祖先元素的位置，就是使用和属性。 DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight: 包括内容区宽/高,padding,border,不...

Near_Li 2019-08-01 18:31 评论0 收藏0