理解HTML Element的长度、坐标等属性
   笔记    0 comment
理解HTML Element的长度、坐标等属性
   笔记    0 comment

你一定或多或少的在使用鼠标点击事件或者滚动事件中因事件数值项（长度、宽度、坐标等）而困扰，事实上对它们做出区分确实不是简单(更确切地说是不简洁)的事情。现在是开始这一有趣经历的时候了，这些数值项主要有以下几类：

元素本身属性

HTML的css像素长度、宽度等，往往和内边距（padding）、边框（border）、滚动条宽高相关。

1. clientWidth

Element.clentWidth是一个只读属性，对于无CSS或内联元素其数值为0。除此之外，它表示元素的内部像素宽度，其构成部分由水平方向上的内边距（padding）、垂直滚动条的宽度（如存在）。

2. clientHeight

Element.clentWidth是一个只读属性，对于无CSS或内联元素其数值为0。除此之外，它表示元素的内部像素高度 ，其构成部分由垂直方向上的内边距（padding）、水平滚动条的高度（如存在）。

提醒

上面两个属性在根元素（<html> 元素）或怪异模式下的 <body> 元素上使用时，属性将返回视口宽度或高度（不包含任何滚动条）。

3. clientLeft

Element.clentLeft是一个只读属性，表示元素的左边框的像素值，当存在左侧垂直滚动条时，这个值因加上滚动条的宽度。

提醒

当元素的属性为 display: inline 时，无论元素是否有边框，clientLeft 都会返回 0

4. clientTop

Element.clentLeft是一个只读属性，表示元素的上边框的像素值。

5. offsetWidth

Element.offsetWidth是一个只读属性，表示元素的布局宽度 ，其构成部分由水平方向的边框值（border）、水平方向的内边距（padding）、垂直滚动条（如存在）。

6. offsetHeight

Element.offsetHeight是一个只读属性，表示元素的布局高度的像素值。其构成部分由垂直方向的边框值（border）、垂直方向的内边距（padding）、水平滚动条（如存在）。

7. offsetLeft

Element.offsetHeight是一个只读属性，返回当前元素左上角相对于 HTMLElement.offsetParent 节点的左边界偏移的像素值。

8. offsetTop

Element.offsetTop是一个只读属性，，返回当前元素相对于其 HTMLElement.offsetParent 元素的顶部内边距的距离。

HTMLElement.offsetParent

只读属性，返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th, body 元素。当元素的 style.display 设置为 "none" 时，offsetParent 返回 null。offsetParent 很有用，因为 offsetTop 和 offsetLeft 都是相对于其内边距边界的。

注意： 以上四个属性将把值四舍五入为整数。如果需要小数值，请使用element.getBoundingClientRect()。

组成部分对比表

属性构成
clientWidthwidth + 左右padding + 垂直滚动条宽度(如果存在)
clientHeightheight+ 上下padding + 水平滚动条高度(如果存在)
clientLeft左border + 左侧垂直滚动条宽度(如果存在)
clientTop上border
offsetWidthwidth + 左右padding + 左右border + 垂直滚动条宽度(如果存在)
offsetHeightheight + 上下padding + 上下border + 水平滚动条高度(如果存在)

元素相对坐标类(鼠标事件)

1. clientX

clientX 只读属性，提供了事件发生时应用程序（浏览器）视口内的水平坐标（而不是页面中的坐标）。

2. clientY

clientY 只读属性，提供了事件发生时应用程序（浏览器）视口内的垂直坐标（而不是页面中的坐标）。

3. screenX

screenX 只读属性，提供鼠标在全局（屏幕）中的水平坐标（偏移量）。

4. screenY

screenY 只读属性，提供鼠标在全局（屏幕）中的垂直坐标（偏移量）。

示例
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>Document</title>
</head>
<body>
<p>移动鼠标以查看其位置。</p>
<p id="screen-log"></p>
</body>
<script>
   let screenLog = document.querySelector("#screen-log");
   document.addEventListener("mousemove", logKey);

   function logKey(e) {
       screenLog.innerText = `
   屏幕 X/Y：${e.screenX}，${e.screenY}
   视口 X/Y：${e.clientX}，${e.clientY}`;
   }

</script>
</html>

​ 滑动鼠标，观察坐标参数的变化：

​

5. pageX/Y

pageX/Y获取到的是触发点相对文档区域左上角距离，会随着页面滚动而改变

元素滚动属性类

1. scrollHeight 、 scrrollWidth

Element.scrollHeight 只读属性是一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容。scrollHeight 的值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度。高度的度量方式与 clientHeight 相同：包括元素的内边距，但不包括元素的边框、外边距以及水平滚动条（如果存在）。它也包括 ::before 和 ::after 这样的伪元素的高度。如果元素的内容不需要垂直滚动条就可以容纳，则其 scrollHeight 等于 clientHeight。

Element.scrollWidth 只读属性是元素内容宽度的一种度量，包括由于溢出而在屏幕上不可见的内容。scrollWidth 值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与 clientWidth 相同：它包含元素的内边距，但不包括边框、外边距或垂直滚动条（如果存在）。它还可以包括伪元素的宽度，例如 ::before 或 ::after。如果元素的内容可以在不需要水平滚动条的情况下容纳，则其 scrollWidth 等于 clientWidth。

2. scrollLeft

Element.scrollLeft 属性可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向（direction）是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为 0。此时，当你从右到左拖动滚动条时，scrollLeft 会从 0 变为负数。

警告

​ 在使用显示比例缩放的系统上，scrollLeft 可能会是一个小数。

3. scrollTop

Element.scrollTop 属性可以·获取或设置元素内容从其顶部边缘滚动的像素数。在现代浏览器中，该值是亚像素精度的，这意味着它不一定是一个整数。

本文由 yuin 创作，
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名。

→ ↓ ↑
Responses