【JavaScript】浏览器视口相关属性（图解）

雨点打透心脏的1/2处 2023-02-15 07:58 4阅读 0赞

### 目录 ###

*   *   *  1. 元素可见大小
         *   *  1.1 element.clientWidth && element.clientHeight
             *  1.2 element.clientLeft && element.clientTop
         *  2. 页面偏移
         *   *  2.1 element.offsetParent
             *  2.2 element.offsetHeight && element.offsetWidth
             *  2.3 element.offsetLeft && element.offsetTop
         *  3. 滚动距离
         *   *  3.1 element.scrollHeight && element.scrollWidth
             *  3.2 element.scrollLeft && element.scrollTop
         *  4. getBoundingClientRect()
         *  5. 其他属性

在学习过程中，遇到了关于浏览器窗口位置获取的相关知识，有很多相关的属性，所以整理、区分一下这些属性。

### 1. 元素可见大小 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.clientHeight</td> 
   <td>返回元素的可见高度</td> 
  </tr> 
  <tr> 
   <td>element.clientWidth</td> 
   <td>返回元素的可见宽度</td> 
  </tr> 
  <tr> 
   <td>element.clientLeft</td> 
   <td>返回元素节点左边框的宽度</td> 
  </tr> 
  <tr> 
   <td>element.clientTop</td> 
   <td>返回元素节点上边框的宽度</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][2020060423401084.png]

#### 1.1 element.clientWidth && element.clientHeight ####

`element.clientHeight`属性返回元素节点可见部分的高度，`element.clientWidth`属性返回元素节点可见部分的宽度。这两个属性包含元素的`padding`值，但是不包含元素的`margin`值、边框以及滚动条。

clientWidth = padding-left + width + padding-right
    clientHeight = padding-top + height + padding-bottom

#### 1.2 element.clientLeft && element.clientTop ####

`element.clientLeft`属性等于元素节点左边框的宽度，`element.clientTop`属性等于网页元素顶部边框的宽度，单位为像素。这两个属性都包括滚动条的宽度，但是不包括`margin`和`padding`值，不过几乎不会出现左侧和顶部滚动条的情况。

**需要注意**：如果元素设置为`display: inline`，那么它的 `element.clientLeft`为0 。

clientLeft = border-left-width 
    clientTop = border-top-width

### 2. 页面偏移 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.offsetParent</td> 
   <td>返回元素的偏移容器</td> 
  </tr> 
  <tr> 
   <td>element.offsetHeight</td> 
   <td>返回元素的高度，包括边框和填充，但不是边距</td> 
  </tr> 
  <tr> 
   <td>element.offsetWidth</td> 
   <td>返回元素的宽度，包括边框和填充，但不是边距</td> 
  </tr> 
  <tr> 
   <td>element.offsetLeft</td> 
   <td>返回当前元素的相对水平偏移位置的偏移容器</td> 
  </tr> 
  <tr> 
   <td>element.offsetTop</td> 
   <td>返回当前元素的相对垂直偏移位置的偏移容器</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20200604233129274.png]

#### 2.1 element.offsetParent ####

`element.offsetParent`属性与定位有着很大的关系，它的定义是：与当前元素最近的经过定位的父级元素。主要有以下几种情况：

*  元素自身有`fixed`定位，那么`offsetParent`结果就是`null`
 *  元素本身没有`fixed`定位，父级元素经过定位，那么`offsetParent`的结果为离自身元素最近的的经过定位的父级元素。
 *  元素本身没有`fixed`定位，且父元素未经过定位，那么`offsetParent`的结果为`<body>`
 *  `<body>`元素的`offsetParent`结果为是`null`

#### 2.2 element.offsetHeight && element.offsetWidth ####

`element.offsetHeight`属性返回元素的垂直高度，`element.offsetWidth`属性返回元素的水平宽度。这两个属性包含了padding，border和滚动条。也就是说，如果不发生溢出，`element.offsetHeight`只比`element.clientHeight`多了边框的高度。

**需要注意**：如果存在垂直滚动条，`offsetWidth`包括垂直滚动条的宽度；如果存在水平滚动条，`offsetHeight`包括水平滚动条的高度

offsetWidth =  border-left-width + padding-left + width + padding-right + border-right-width
    offsetHeight =  border-top-width + padding-top + height + padding-bottom + border-bottom-width

#### 2.3 element.offsetLeft && element.offsetTop ####

`offsetTop`表示元素的上外边框至`offsetParent`元素的上内边框之间的像素距离  
`offsetLeft`表示元素的左外边框至`offsetParent`元素的左内边框之间的像素距离

### 3. 滚动距离 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>element.scrollHeight</td> 
   <td>返回整个元素的高度（包括带滚动条的隐蔽的地方）</td> 
  </tr> 
  <tr> 
   <td>element.scrollWidth</td> 
   <td>返回元素的整个宽度（包括带滚动条的隐蔽的地方）</td> 
  </tr> 
  <tr> 
   <td>element.scrollLeft</td> 
   <td>返回当前视图中的实际元素的左边缘和左边缘之间的距离</td> 
  </tr> 
  <tr> 
   <td>element.scrollTop</td> 
   <td>返回当前视图中的实际元素的顶部边缘和顶部边缘之间的距离</td> 
  </tr> 
 </tbody> 
</table>

#### 3.1 element.scrollHeight && element.scrollWidth ####

`element.scrollHeight`属性返回整个元素的总高度， `element.scrollWidth`属性返回整个元素的总宽度。我们可以理解为元素在垂直或水平方向上可以滚动的距离。

它们返回的是整个元素的高度和宽度，包括由于滚动条而不可见的部分。默认情况下，这两个属性包括`padding`，但是不包括`margin`和`border`。

如果元素没有发生溢出（没出现滚动条），那么`scrollHeight`和`clientHeight`是相等的，`scrollWidth`属性与`clientWidth`属性是相等的。

scrollWidth = padding-left + width + padding-right + 滚动条距离
    scrollHeight = padding-top + height + padding-bottom + 滚动条距离

#### 3.2 element.scrollLeft && element.scrollTop ####

`element.scrollLeft`属性表示元素的水平滚动条向右侧滚动的距离，`element.scrollTop`属性表示元素的垂直滚动条向下滚动的距离。

如果没有出现滚动条，那上面的两个属性值就是0。这两个属性都可以读写，对属性值进行设置，就会使得浏览器将指定元素滚动到相应的位置。

### 4. getBoundingClientRect() ###

`getBoundingClientRect()`是DOM中element方法，该方法返回元素的大小以及其相对于视口的距离（不包含滚动条距离）。

该方法返回的是一个DOMRect对象，该对象中包含了`buttom、top、width、height、left、right、x、y`这几个属性，这些属性都是只读属性，除了`width`和`height`之外，其他属性都是按照视口窗口的左上角来计算的。

![在这里插入图片描述][202006051148475.png]

示例：

![在这里插入图片描述][20200605113857632.png]

### 5. 其他属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>clientX</td> 
   <td>返回当事件被触发时，鼠标指针距离浏览器可视口左边的水平坐标</td> 
  </tr> 
  <tr> 
   <td>clientY</td> 
   <td>返回当事件被触发时，鼠标指针距离浏览器可视口上边的垂直坐标</td> 
  </tr> 
  <tr> 
   <td>screenX</td> 
   <td>返回当某个事件被触发时，鼠标指针距离屏幕左边的水平坐标</td> 
  </tr> 
  <tr> 
   <td>screenY</td> 
   <td>返回当某个事件被触发时，鼠标指针距离屏幕上边的垂直坐标</td> 
  </tr> 
  <tr> 
   <td>pageX</td> 
   <td>鼠标指针的位置，相对于文档的左边的距离，包括滚动条的距离</td> 
  </tr> 
  <tr> 
   <td>pageY</td> 
   <td>鼠标指针的位置，相对于文档的上边的距离，包括滚动条的距离</td> 
  </tr> 
  <tr> 
   <td>offsetX</td> 
   <td>元素左边距离带有定位的父元素的左边的距离</td> 
  </tr> 
  <tr> 
   <td>offsetY</td> 
   <td>元素上边距离带有定位的父元素的上边的距离</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20200605014447175.png]

[2020060423401084.png]: https://img-blog.csdnimg.cn/2020060423401084.png?
[20200604233129274.png]: https://img-blog.csdnimg.cn/20200604233129274.png?
[202006051148475.png]: https://img-blog.csdnimg.cn/202006051148475.png?
[20200605113857632.png]: https://img-blog.csdnimg.cn/20200605113857632.png?
[20200605014447175.png]: https://img-blog.csdnimg.cn/20200605014447175.png?