C1:DOM 元素的尺寸和位置

2019年8月24日 140次阅读 来源: BBQ只有番薯

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的赤色盒子

《C1:DOM 元素的尺寸和位置》

当绿色盒子的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

<html> 和<body> 的尺寸

<html> 的clientHeight 和clientWidth 永久即是viewport – 滚动条的宽度/高度（挪动端除外）,不论box-sizing的取值是什么。
<body> 的尺寸盘算体式格局和平常的DOM元素是一样的。

Element.getBoundingClientRect()

返回一个DOMRect对象，包括left ,top,width,height 四个属性的边框鸠合
《C1:DOM 元素的尺寸和位置》
个中的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的区分跟上面差不多。
应当来讲，这三个值在挪动端许多时刻都是相称的。

    原文作者：BBQ只有番薯
    原文地址: https://segmentfault.com/a/1190000013128660
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞