理解clientHeight,scrollHeight,offsetHeight等Dom中的Element对象属性

最新推荐文章于 2024-02-23 16:45:14 发布

fredricen

最新推荐文章于 2024-02-23 16:45:14 发布

阅读量721

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/fredricen/article/details/105022160

版权

JavaScript 专栏收录该内容

39 篇文章 2 订阅

订阅专栏

代码

HTML

<div class="container">
      <div
        id="aa"
        contenteditable
        style="width:1400px;height:1000px;border-left: 10px solid #ccc;border-top:10px solid #ccc;padding:10px;margin:5px;"
      >
        123
      </div>
      <span id="bb">123456</span>
      <div id="cc" style="border-top:5px solid #ccc;">abc</div> 
</div>

CSS

.container {
        width: 500px;
        height: 500px;
        padding: 10px;
        border: 10px solid #eee;
        margin: 10px;
      }

JavaScript

var elContainer = document.querySelector(".container");
// 元素的css height+padding，不含border，margin
console.log(elContainer.clientHeight); //520

// 元素的总高度，内部各个子元素高度（含padding和border）之和加padding加子元素内部margin，不含border，margin
console.log(elContainer.scrollHeight); //1097

// 元素的css height+padding+border，不含margin
console.log(elContainer.offsetHeight); //540
// 元素border-top的宽度
console.log(elContainer.clientTop); //10

var elDiv = document.getElementById("aa");
console.log(elDiv.clientHeight); //1020
console.log(elDiv.scrollHeight); //1020 对于没有滚动条的元素，clientHeight===scrollHeight
console.log(elDiv.offsetHeight); //1030
console.log(elDiv.clientTop); //10

理解

Element.clientHeight 属性返回一个整数值，表示元素节点的 CSS 高度（单位像素），只对块级元素生效，对于行内元素返回0。如果块级元素没有设置 CSS 高度，则返回实际高度。

除了元素本身的高度，它还包括padding部分，但是不包括border、margin。如果有水平滚动条，还要减去水平滚动条的高度。注意，这个值始终是整数，如果是小数会被四舍五入。

Element.clientWidth 属性返回元素节点的 CSS 宽度，同样只对块级元素有效，也是只包括元素本身的宽度和padding，如果有垂直滚动条，还要减去垂直滚动条的宽度。

document.documentElement 的 clientHeight 属性，返回当前视口的高度（即浏览器窗口的高度），等同于 window.innerHeight 属性减去水平滚动条的高度（如果有的话）。document.body 的高度则是网页的实际高度。一般来说，document.documentElement.clientHeight 大于 document.body.clientHeight。

Element.clientLeft 属性等于元素节点左边框（left border）的宽度（单位像素），不包括左侧的 padding 和 margin。如果没有设置左边框，或者是行内元素（display: inline），该属性返回0。该属性总是返回整数值，如果是小数，会四舍五入。

Element.clientTop 属性等于网页元素顶部边框的宽度（单位像素），其他特点都与 clientLeft 相同。

Element.scrollHeight 属性返回一个整数值（小数会四舍五入），表示当前元素的总高度（单位像素），包括溢出容器、当前不可见的部分。它包括padding，但是不包括border、margin以及水平滚动条的高度（如果有水平滚动条的话），还包括伪元素（::before或::after）的高度。

Element.scrollWidth 属性表示当前元素的总宽度（单位像素），其他地方都与 scrollHeight 属性类似。这两个属性只读。

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

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

注意，如果元素节点的内容出现溢出，即使溢出的内容是隐藏的，scrollHeight属性仍然返回元素的总高度。

Element.offsetParent 属性返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

<div style="position: absolute;">
  <p>
    <span>Hello</span>
  </p>
</div>

上面代码中，span元素的 offsetParent 属性就是div元素。

该属性主要用于确定子元素位置偏移的计算基准，Element.offsetTop 和 Element.offsetLeft 就是 offsetParent 元素计算的。

如果该元素是不可见的（display属性为none），或者位置是固定的（position属性为fixed），则 offsetParent 属性返回null。

<div style="position: absolute;">
  <p>
    <span style="display: none;">Hello</span>
  </p>
</div>

上面代码中，span元素的 offsetParent 属性是null。

如果某个元素的所有上层节点的position属性都是static，则Element.offsetParent 属性指向<body>元素。

Element.offsetHeight 属性返回一个整数，表示元素的 CSS 垂直高度（单位像素），包括元素本身的高度、padding 和 border，以及水平滚动条的高度（如果存在滚动条）。

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

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

参考链接

阮一峰《JavaScript教程》

fredricen

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
理解clientHeight,scrollHeight,offsetHeight等Dom中的Element对象属性

目录代码HTMLCSSJavaScript理解代码HTML<div class="container"> <div id="aa" contenteditable style="width:1400px;height:1000px;border-left: 10px solid #ccc;border-top:10...
复制链接

扫一扫