JavaScript学习之 Element对象_获取元素位置

林林一928

已于 2024-04-20 21:00:54 修改

阅读量1.9k

点赞数 35

文章标签：前端 javascript 开发语言学习

于 2024-04-20 17:51:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_73765584/article/details/138005073

版权

本文详细解释了HTMLDOM中的client系列（clientHeight,clientWidth）获取元素包含padding但不计border、margin的尺寸，scroll系列（scrollHeight,scrollWidth）包括所有内容包括溢出，offset系列（offsetHeight,offsetWidth）包括边框、padding和滚动条。同时介绍了clientLeft和clientTop获取边框宽度，以及offsetLeft和offsetTop计算元素相对于父级的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

属性	描述
clientHeight	获取元素高度包括`padding`部分，但是不包括`border`、`margin`
clientWidth	获取元素宽度包括`padding`部分，但是不包括`border`、`margin`
clientLeft	元素节点左边框（left border）的宽度
clientTop	元素节点上边框（top border）的高度
scrollHeight	元素总高度，它包括`padding`，但是不包括`border`、`margin`包括溢出的不可见内容
scrollWidth	元素总宽度，它包括`padding`，但是不包括`border`、`margin`包括溢出的不可见内容
scrollLeft	元素的水平滚动条向右滚动的像素数量
scrollTop	元素的垂直滚动条向下滚动的像素数量
offsetHeight	元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border
offsetWidth	元素的 CSS 水平宽度（单位像素），包括元素本身的宽度、padding 和 border
offsetLeft	到定位父级左边界的间距
offsetTop	到定位父级上边界的间距

1. clientHeight, clientWidth

Element.clientHeight

定义：

获取元素高度（只对块级元素生效），包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

返回值：

属性返回一个整数值，表示元素节点的 CSS 高度（单位像素）。

注意：

1.只对块级元素生效，对于行内元素返回0。

2.如果块级元素没有设置 CSS 高度，则返回实际高度。

Element.clientWidth

定义：

获取元素宽度（只对块级元素生效），包括padding部分，但是不包括border、margin。如果有垂直滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

返回值：

属性返回一个整数值，表示元素节点的 CSS 高度（单位像素）。

拓：可以通过 clientHeight 获取到视口高度与网页实际高度

1.document.documentElement.clientHeight属性，返回当前视口的高度（即浏览器窗口的高度）[documentElement整个浏览器的可视窗口对象]

2.document.body的高度则是网页的总高度。

// 视口高度
document.documentElement.clientHeight
// 网页总高度
document.body.clientHeight

注意:

在网页设计中，视口高度（Viewport Height，vh）和页面总高度（Total Page Height）是两个不同的概念，它们分别表示了不同的尺寸和概念：

视口高度（Viewport Height，vh）：视口是指浏览器窗口内可见内容的区域。视口高度指的是视口的高度，通常以百分比的形式表示，相对于整个视口的高度。例如，100vh 表示视口的高度的 100%。视口高度可以用来创建响应式设计，使元素的尺寸相对于浏览器窗口的大小进行调整。

页面总高度（Total Page Height）：页面总高度是指整个网页文档的高度，包括了视口可见部分之外的内容，如滚动区域中的内容。页面总高度通常是固定的，由文档内容的长度决定。当页面内容超出了视口的高度时，用户可以通过滚动条来查看页面的其他部分。

区别：

视口高度是相对于浏览器窗口的高度，而页面总高度是整个网页文档的高度。

视口高度可以通过 vh 单位来表示，并且可以根据浏览器窗口大小进行调整，而页面总高度是由网页内容的长度确定的，通常是固定的。

视口高度用于创建响应式设计，使元素相对于浏览器窗口大小进行调整，而页面总高度则表示了整个页面的实际长度，包括了视口之外的内容。

2. clientLeft,clientTop

Element.clientLeft

定义：

元素节点左边框（left border）的宽度（单位像素），不包括左侧的padding和margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。

返回值：

该属性总是返回整数值，如果是小数，会四舍五入。

Element.clientTop

定义：

元素顶部边框的高度（单位像素），与 clientLeft 类似。

简单示例1：

<style>
    .box{
        width: 200px;
        height: 200px;
        background-color: #FFEC9E;
        border-top: 17px solid #FFBB70;
        border-left: 13px solid #ED9455;
    }
</style>

<div class="box"></div>

<script>
        // 1. 获取元素
        var box = document.querySelector('.box');
        // clientLeft: 获取元素左边框的宽度
        console.log(`box左边框宽度为：${box.clientLeft}`);
        // clientTop: 获取元素上边框的宽度
        console.log(`box上边框宽度为：${box.clientTop}`);
</script>

结果：

3. scrollHeight,scrollWidth

Element.scrollHeight

定义：

表示当前元素的总高度（单位像素），它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话）。

返回值：

属性返回一个整数值（小数会四舍五入）。

Element.scrollWidth

定义：

属性表示当前元素的总宽度（单位像素），其他地方都与scrollHeight属性类似。

注意：这两个属性只读。

整张网页的总高度可以从document.documentElement或document.body上读取

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

4. scrollLeft,csrollTop

Element.scrollLeft

定义：

表示当前元素的水平滚动条向右侧滚动的像素数量。对于没有滚动条的网页元素，该值总是等于0。

Element.scrollTop

定义：

属性表示当前元素的垂直滚动条向下滚动的像素数量。对于没有滚动条的网页元素，该值总是等于0。

注意：

如果要查看整张网页的水平的和垂直的滚动距离，要从document.documentElement元素上读取

document.documentElement.scrollLeft
document.documentElement.scrollTop

5. offsetHeight,offsetWidth

Element.offsetHeight

定义：

表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

返回值：

属性返回一个整数

Element.offsetWidth

定义：

属性表示元素的 CSS 水平宽度（单位像素），其他都与Element.offsetHeight一致。

这两个属性都是只读属性，只比Element.clientHeight和Element.clientWidth多了边框的高度或宽度。如果元素的 CSS 设为不可见（比如display: none;），则返回0

简单示例2：

<style>
    .box{
        width: 200px;
        height: 100px;
        background-color: #FEC7B4;
        padding: 10px 20px 10px 20px;
        border: 10px solid #FC819E;
    }
</style>

<body>

<div class="box"></div>

<script>
    // 1. 获取元素
    var box = document.querySelector('.box');
    // 2. offsetHeight 获取元素高度
    console.log(`使用offsetHeight获取：${box.offsetHeight}`);
    // 3. offsetWidth 获取元素宽度
     console.log(`使用offsetWidth获取：${box.offsetWidth}`);
</script>

结果：

6. offsetLeft,offsetTop

Element.offsetLeft

定义：

返回当前元素左上角相对于Element.offsetParent节点的水平位移，单位为像素。

Element.offsetTop

定义：

返回当前元素左上角相对于Element.offsetParent节点的垂直位移，单位为像素。

通常，这两个值是指相对于父节点的位移

<!-- html部分 -->
<div class="parent">
  <div class="box" id="box"></div>
</div>

/* css部分 */
.parent{
  width: 200px;
  height: 200px;
  background: red;
  position: relative;
  left: 50px;
  top: 50px;
}

.box{
  width: 100px;
  height: 100px;
  background: yellow;
  position: absolute;
  left: 50px;
  top: 50px;
}

结果：