Javascript中经常使用宽高和坐标属性

1.scrollHeight/Width

scrollHeight/Width是一个只读的属性,元素的内容高度/宽度,包括由于overflow属性而不可见的部份。不能直接从css中获得。scrollHeight/Width的值除了内容高度/宽度,也包括padding值
scrollWidth相似。
《Javascript中经常使用宽高和坐标属性》

2.scrollTop/Left

scrollLeft为例:
scrollLeft属性能够获得或许设置元素转动到左侧的像素值。注重(rtl和ltr会差别)

  • 假如element不能够scroll的时刻,比方没有设置overflow属性。scrollLeft会被重置为0,不论你设置什么值,都不会有什么结果。(这也是许多scrollLeft失效的缘由)

  • 设置的值小于0,重置为0

  • 设置的值凌驾内容许可转动的最大值,重置为最大值。

注重事项:scrollLeft属性是应用在父元素上面,而不是子元素。
别的scrollTop与scrollLeft相似。

3. offsetHeight/Width

offsetHeight/Width是一个只读属性,返回一个元素的构造宽度,包括元素的border和padding、转动条(假如存在的话)和css设置的高度/宽度。

《Javascript中经常使用宽高和坐标属性》

4.offsetTop/Left

offsetLeft为例, 返回当前元素左上角相关于HTMLElement.offsetParent节点的左侧界偏移的像素值。

HTMLElement.offsetParent:一个只读属性,返回一个指向近来的包括该元素的定位元素。假如没有定位的元素,则 offsetParent 为近来的 table 元素或根元素(规范形式下为 html;quirks 形式下为 body)。当元素的 style.display 设置为 “none” 时,offsetParent 返回 null。offsetParent 很有效,由于 offsetTop 和 offsetLeft 都是相关于其内边距边境的。

比方:

<div style="width: 300px; border-color:blue;
  border-style:solid; border-width:1;">
  <span>Short span. </span>
  <span id="long">Long span that wraps within this div.</span>
</div>

<div id="box" style="position: absolute; border-color: red;
  border-width: 1; border-style: solid; z-index: 10">
</div>

<script>
  var box = document.getElementById("box");
  var long = document.getElementById("long");
  box.style.left = long.offsetLeft + document.body.scrollLeft + "px";
  box.style.top = long.offsetTop + document.body.scrollTop + "px";
  box.style.width = long.offsetWidth + "px";
  box.style.height = long.offsetHeight + "px";
   console.log(long.offsetParent) //offsetParent为body
</script> 

offsetTop 相似的原理。

5.clientWidth/Height

clientWidth/Height是一个只读属性,关于没有css或许内联元素,其值为0。它包括内部的宽度和高度和padding,但不包括转动条、border和margin。
《Javascript中经常使用宽高和坐标属性》

6.clientTop/Left

clientTop/Left指的是一个元素顶部/左侧框的宽度。

7. 区分

摘自stackoverflow的一幅图,能够很好地看到之间的区分:

《Javascript中经常使用宽高和坐标属性》

8.clientX/Y

clientX/Y属性返回当事宜被触发时鼠标指针向关于浏览器页面(或客户区)的程度/竖直坐标,不包括转动条转动才显现的地区。定位的根据为浏览器窗口内容地区的左上角

9.offsetX/Y(experimental technology)

offsetX/Y 设置或许是获得鼠标相关于目的事宜的父元素的内边境在X/Y坐标上的位置

10.screenX/Y

screenX/Y 相关于物理屏幕/监视器的左上角,只要你增添或削减显现器的数目或分辨率,参考点才会挪动。

11.pageX/Y

pageX/Y 相关于全部衬着页面的左上角(包括经由过程转动隐蔽的部份),简朴来讲就是<html>元素。

《Javascript中经常使用宽高和坐标属性》

参考资料

1.Element.scrollHeight
2.Element.scrollLeft
3.HTMLElement.offsetWidth
4.HTMLElement.offsetParent
5.HTMLElement.offsetLeft
6.Element.clientHeight
7.Element.clientTop
8.Understanding offsetWidth, clientWidth, scrollWidth and -Height, respectively

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