理解HTML Element的长度、坐标等属性 Dec 15 2024 笔记 0 comment 你一定或多或少的在使用鼠标点击事件或者滚动事件中因事件数值项(长度、宽度、坐标等)而困扰,事实上对它们做出区分确实不是简单(更确切地说是不简洁)的事情。现在是开始这一有趣经历的时候了,这些数值项主要有以下几类: - 元素本身属性类:`clientWidth`、`clientHeight`、`clientLeft`、`clientTop`、`offsetWidth`、`offsetHeight` 、`offsetLeft`、`offsetTop` - 元素相对坐标类(鼠标事件):`clientX` 、`clientY`、`pageX`、`pageY`、`screenX`、`screenY` - 元素滚动属性类:`scrollHeight`、`scrollWidth`、`scrollLeft`、`scrollTop` ### 元素本身属性 HTML的css像素长度、宽度等,往往和内边距(padding)、边框(border)、滚动条宽高相关。 #### 1. clientWidth `Element.clentWidth`是一个只读属性,对于无CSS或内联元素其数值为0。除此之外,它表示元素的***内部像素宽度***,其构成部分由水平方向上的内边距(padding)、垂直滚动条的宽度(如存在)。 #### 2. clientHeight `Element.clentWidth`是一个只读属性,对于无CSS或内联元素其数值为0。除此之外,它表示元素的***内部像素高度*** ,其构成部分由垂直方向上的内边距(padding)、水平滚动条的高度(如存在)。 > **提醒** > > > > 上面两个属性在根元素(`` 元素)或怪异模式下的 `` 元素上使用时,属性将返回视口宽度或高度(不包含任何滚动条)。 #### 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`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent) 节点的左边界偏移的像素值。 #### 8. offsetTop `Element.offsetTop`是一个只读属性,,返回当前元素相对于其 [`HTMLElement.offsetParent`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetParent) 元素的顶部内边距的距离。 > **`HTMLElement.offsetParent`** > > > > 只读属性,返回一个指向最近的(指包含层级上的最近)包含该元素的定位元素或者最近的 `table`, `td`, `th`, `body` 元素。当元素的 `style.display` 设置为 "none" 时,`offsetParent` 返回 `null`。`offsetParent` 很有用,因为 [`offsetTop`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetTop) 和 [`offsetLeft`](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/offsetLeft) 都是相对于其内边距边界的。 > **注意:** 以上四个属性将把值四舍五入为整数。如果需要小数值,请使用[`element.getBoundingClientRect()`](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)。 组成部分对比表 | **属性** | **构成** | | ---------------- | ------------------------------------------------------------ | | **clientWidth** | width + 左右padding + 垂直滚动条宽度(如果存在) | | **clientHeight** | height+ 上下padding + 水平滚动条高度(如果存在) | | **clientLeft** | 左border + 左侧垂直滚动条宽度(如果存在) | | **clientTop** | 上border | | **offsetWidth** | width + 左右padding + 左右border + 垂直滚动条宽度(如果存在) | | **offsetHeight** | height + 上下padding + 上下border + 水平滚动条高度(如果存在) | ### 元素相对坐标类(鼠标事件) #### 1. clientX **`clientX`** 只读属性,提供了事件发生时应用程序(浏览器)[视口](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport)内的水平坐标(而不是页面中的坐标)。 #### 2. clientY `clientY` 只读属性,提供了事件发生时应用程序(浏览器)[视口](https://developer.mozilla.org/zh-CN/docs/Glossary/Viewport)内的垂直坐标(而不是页面中的坐标)。 #### 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`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight) 相同:包括元素的内边距,但不包括元素的边框、外边距以及水平滚动条(如果存在)。它也包括 [`::before`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before) 和 [`::after`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after) 这样的伪元素的高度。如果元素的内容不需要垂直滚动条就可以容纳,则其 `scrollHeight` 等于 [`clientHeight`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientHeight)。 **`Element.scrollWidth`** 只读属性是元素内容宽度的一种度量,包括由于溢出而在屏幕上不可见的内容。`scrollWidth` 值等于元素在不使用水平滚动条的情况下适合视口中的所有内容所需的最小宽度。宽度的测量方式与 [`clientWidth`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth) 相同:它包含元素的内边距,但不包括边框、外边距或垂直滚动条(如果存在)。它还可以包括伪元素的宽度,例如 [`::before`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::before) 或 [`::after`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/::after)。如果元素的内容可以在不需要水平滚动条的情况下容纳,则其 `scrollWidth` 等于 [`clientWidth`](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/clientWidth)。 #### 2. scrollLeft **`Element.scrollLeft`** 属性可以`读取或设置`元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向([`direction`](https://developer.mozilla.org/zh-CN/docs/Web/CSS/direction))是`rtl` (right-to-left) ,那么滚动条会位于最右侧(内容开始处),并且`scrollLeft`值为 0。此时,当你从右到左拖动滚动条时,scrollLeft 会从 0 变为负数。 > ##### #警告 > > 在使用显示比例缩放的系统上,`scrollLeft` 可能会是一个小数。 #### 3. scrollTop **`Element.scrollTop`** 属性可以·获取或设置元素内容从其顶部边缘滚动的像素数。在现代浏览器中,该值是亚像素精度的,这意味着它不一定是一个整数。 本文由 yuin 创作,本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名。