C1:DOM 元素的尺寸和位置

NusterCache 发布于2019-08-30 13:55 / 2410人阅读

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

DOM元素的尺寸和位置 DOM 元素的尺寸 DOM.offsetWidth/offsetHeight:

包括内容区宽/高,padding,border,不包括margin.
如果元素的box-sizeing是border-box,那么此时设置的style.width/style.height就是该元素的offsetWidth/offsetHeight.也就是等于内容区的宽/高 + padding + border + 滚动条。

DOM.clientWidth/clientHeight:

包括内容区宽/高，padding,不包括border 和margin.
在box-sizing:border-box的情况下，等于style.width/height - border的宽度。
这里还有另外一种换算方法：clientWidth/clientHeight = offsetWidth/height - border - 滚动条的宽/高

DOM.scrollWidth/scrollHeight:

包括内容区的宽/高，padding,以及子元素超出的宽/高，不包括border.
就是clientWidth / clientHeight 加上其子元素超出的宽/高。
box-sizing:border-box的情况也是一样。
值得注意的是：这里 DOM的子元素超出部分 的计算随着DOM的overflow的取值不同而略有不同。
如下：绿色盒子宽高100px,padding:20px;box-sizing:content-box里面有一个高度为200px的红色盒子

当绿色盒子的overflow为默认值的时候，绿色盒子的scrollHeight = 上边距 20px + 红色盒子的高度 = 220px
当绿色盒子的overflow属性为auto,scroll,hidden中的任意一个的时候，其scrollHeight = 上边距 + 下边距 + 红色盒子的高度 = 20 + 20 +200 = 240px

DOM.style.width/style.height:

返回style属性中的width和height。这两个值根据box-sizing 的取值不同所表示的范围也不同。
使用DOM.style.width/height 这种方式只能取到行内样式，而取不到CSS样式中的属性值。更多时候，我们可能需要的是这个方法：
window.getComputedStyle(DOM) 返回一个DOM元素计算后的style对象。
当box-sizing:content-box的时候，style.width/height = offsetWidth/height - 滚动条的宽/高 - border - 内边距。
当box-sizing :border-box的时候，style.width/height 就等于offsetWidth / offsetHeight

和的尺寸

的clientHeight 和clientWidth 永远等于viewport - 滚动条的宽度/高度（移动端除外）,不论box-sizing的取值是什么。
的尺寸计算方式和普通的DOM元素是一样的。

Element.getBoundingClientRect()

返回一个DOMRect对象，包含left ,top,width,height 四个属性的边框集合

其中的left ,top 是相对于视口左上角而言的。如果元素滚动了，left,top值也是变化的。width/height就是元素的盒子模型(border + padding + content + 滚动条)的计算宽度和高度。对于html和body同样适用。

DOM元素的位置

使用element.getBoundingClientRect()我们可以得到元素相对于viewport的位置。

还有一种方法可以得到元素相对于最近定位的祖先元素的位置，就是使用element.offsetTop和element.offsetLeft 属性。

这里有另外一个可以得到元素相对于根元素（通常情况下根元素指的是视口）,根据element.offsetParent 一直向上查找，直到element.offsetParent == null。html,body的offsetParent都为null.

let current = element.offsetParent
let top = element.offsetTop
while(current){
    top = current.offsetTop 
    current = current.offsetParent
}

值得注意的是，element.offsetTop/offsetLeft的计算的是element元素外边框到包含它的元素的内边框之间的距离。所以严格上来说，应该还要依据情况加上边框的宽度的。但是边框一般不会很大，最多1px 2px，所以可以忽略。

click 事件中鼠标指针的位置

在PC，移动端的click事件中mouseEvent 都会包含以下信息：

e.clientX/e.clientY:

返回鼠标指针相对与浏览器窗口客户区的坐标。

e.pageX/e.pageY:

返回鼠标指针相对于整个文档的坐标。浏览器没有滚动条的时候，这个值和e.clientX/e.clientY 是一样的。但是有滚动条的时候，这个值就会比e.clientX/e.clientY大。

e.screenX/e.screenY

返回鼠标指针相对于整个屏幕的坐标。哪怕此时你的浏览器被你缩小了移动到了角落，它的计算基准都是物理屏幕的左上角。

e.offsetX/e.offsetY

返回鼠标指针相对于e.target的坐标,这一点要区别于e.currentTarget。由于事件的冒泡，所以当底层的元素点击事件冒泡到顶层的时候，在顶层事件处理函数中的event 对象中的offsetX/offsetY 还是相对于最初触发的底层元素。
如果祖先元素有translate,scale貌似这个值获取不对。。。
换一种方法获取吧，e.clientX,e.clientY配合element.getBoundingClientRect()

function getOffset(e){
    let target = e.currentTarget
    let rect = target.getBoundingClientRect()
    return {
        x: e.clientX - rect.left,
        y: e.clientY - rect.top
    }
}

这样子不管其祖先元素有没有设置transform，都可以在点击的时候获得鼠标指针位置相对于e.currentTarget的相对坐标。

移动端touch事件中一些关于位置的有用信息

移动端的touch 事件我们也能得到许多类似的信息，这些信息存在e.touches 的touch对象中。

touch.screenX/touch.screenY:

返回相对于屏幕边沿的坐标。

touch.clientX/touch.clientY:

返回相对于viewport边沿的坐标。

touch.pageX/touch.pageY:

返回相对于文档边沿的坐标。和clientX/clientY的区别跟上面差不多。
应该来说，这三个值在移动端很多时候都是相等的。

GPU云服务器云服务器 dom元素位置数组元素位置java js获取元素位置 html 查元素位置

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

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

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
整理获取 viewport 和 element 尺寸和位置方法

摘要：整理获取和尺寸和位置方法更多前端技术和知识点，搜索订阅号菌订阅视口页面或窗口的位置和宽高获取视口宽高下面方法是包括滚动条的宽高，不支持滚动条另外浏览器兼容差，可获取包括工具栏的宽高页面滚动位置返回整个页面的滚动的位置，与返回的值一致，前者是 showImg(https://segmentfault.com/img/remote/1460000018860153?w=640&h=426)...

dinfer 2019-08-23 16:54 评论0 收藏0
原生 JS 获取元素的尺寸和位置

摘要：如何获取元素的真实尺寸呢通过下，介绍。这个函数主要提供给我们元素和宽度在内的一系列值仍然不要妄想通过获得，加上原先的，就可以减去和的值获得元素的真实尺寸。关于元素的尺寸和位置，这原本是 CSS 干的事，但更多的时候需要用 JavaScript 来获取这些参数，比如一个很好的例子 js 实现的图片瀑布流。 showImg(https://segmentfault.com/img/bVG...

simon_chen 2019-08-22 10:47 评论0 收藏0