Element的各种宽度长度滚动值属性

2020-05-13 本文已影响0人 darkTi

一、Element.clientHeight，Element.clientWidth (不包括border的宽度！！)

Element.clientHeight属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。
除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。
Element.clientWidth属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

// 视口高度
document.documentElement.clientHeight

// 网页总高度
document.body.clientHeight

二、Element.clientLeft，Element.clientTop（就是左边框和上边框的宽度）

Element.clientLeft属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入。
Element.clientTop属性等于网页元素顶部边框的宽度（单位像素），其他特点都与clientLeft相同。

三、Element.scrollHeight，Element.scrollWidth（只读）

Element.scrollHeight属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。
Element.scrollWidth属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。这两个属性只读。

// 返回网页的总高度
document.documentElement.scrollHeight
document.body.scrollHeight

scrollHeight与clientHeight的区别在于，如果一个元素有伪元素（::before或::after），那么scrollHeight的高度不仅包含元素自身的高度（不包括元素的border和margin），还包括伪元素整体的高度（包括border和margin，当然是伪元素布局在元素外的情况下）
所以一旦元素的高度超过视口高度时，最好用scrollHeight来获取元素的整体高度；

四、Element.scrollLeft，Element.scrollTop（可读写）

Element.scrollLeft属性表示当前元素的水平滚动条向右侧滚动的像素数量；
Element.scrollTop属性表示当前元素的垂直滚动条向下滚动的像素数量。对于那些没有滚动条的网页元素，这两个属性总是等于0。（因为没有发生滚动嘛，没有滚动，那这两个属性也就没有意义了）
如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取：

document.documentElement.scrollLeft
document.documentElement.scrollTop //整个网页垂直滚动的高度

这两个属性都可读写，设置该属性的值，会导致浏览器将当前元素自动滚动到相应的位置。

这里再介绍下window.scrollX和window.scrollY

window.scrollX：以像素为单位，返回水平轴上document已经被卷去的宽度 number类型；（等同于document.documentElement.scrollLeft）

window.scrollY：以像素为单位，返回垂直方向上document被卷曲的高度 number类型；（等同于document.documentElement.scrollTop ）

pageYOffset 属性是 scrollY 属性的别名，pageXOffset同理，为了跨浏览器兼容，一般用后者（pageYOffset、pageXOffset）

当网页有滚动条的时候，document.documentElement.scrollHeight = document.documentElement.clientHeight + document.documentElement.scrollTop

当网页没有滚动条的时候，document.documentElement.scrollHeight = document.documentElement.clientHeight

五、Element.offsetParent

Element.offsetParent属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>

上面代码中，span元素的offsetParent属性就是div元素。
该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop和Element.offsetLeft就是offsetParent元素计算的。

如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则offsetParent属性返回null。

<div style="position: absolute;">
  <p>
    <span style="display: none;">Hello</span>
  </p>
</div>

上面代码中，span元素的offsetParent属性是null。

如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent属性指向<body>元素。

六、Element.offsetHeight，Element.offsetWidth（只读）

Element.offsetHeight属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。
Element.offsetWidth属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。
这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0。

七、Element.offsetLeft，Element.offsetTop

Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移，Element.offsetTop返回垂直位移，单位为像素。通常，这两个值是指相对于父节点的位移。
下面的代码可以算出元素左上角相对于整张网页的坐标。

function getElementPosition(e) {
  var x = 0;
  var y = 0;
  while (e !== null)  {
    x += e.offsetLeft;
    y += e.offsetTop;
    e = e.offsetParent;
  }
  return {x: x, y: y};
}

八、Element.getBoundingClientRect()

Element.getBoundingClientRect方法返回一个对象，提供当前元素节点的大小、位置等信息，基本上就是 CSS 盒状模型的所有信息。

var rect = obj.getBoundingClientRect()

上面代码中，getBoundingClientRect方法返回的rect对象，具有以下属性（全部为只读）。
①x：元素左上角相对于视口的横坐标；
②y：元素左上角相对于视口的纵坐标；
③height：元素高度；
④width：元素宽度；
⑤left：元素左上角相对于视口的横坐标，与x属性相等；
⑥right：元素右边界相对于视口的横坐标（等于x + width）；
⑦top：元素顶部相对于视口的纵坐标，与y属性相等；
⑧bottom：元素底部相对于视口的纵坐标（等于y + height）；

由于元素相对于视口（viewport）的位置，会随着页面滚动变化，因此表示位置的四个属性值，都不是固定不变的。如果想得到绝对位置，可以将left属性加上window.scrollX，top属性加上window.scrollY。
注意，getBoundingClientRect方法的所有属性，都把边框（border属性）算作元素的一部分。也就是说，都是从边框外缘的各个点来计算。因此，width和height包括了元素本身 + padding + border