📌  相关文章
📜  HTML | DOM clientHeight 属性(1)

📅  最后修改于: 2023-12-03 15:01:11.549000             🧑  作者: Mango

HTML | DOM clientHeight 属性

简介

clientHeight 是 DOM 元素的属性，表示元素的内部高度，包括内边距，但不包括边框、外边距和滚动条。

语法
element.clientHeight
返回值

一个整数，表示元素的内部高度（单位为像素）。

使用方法

通过以下代码可以获取一个元素的 clientHeight：

const elem = document.getElementById("myElement");
const height = elem.clientHeight;
注意事项

  • 在 <body> 元素上使用 clientHeight 属性时，需要注意浏览器兼容性，不同浏览器有不同的定义。

  • 在有滚动条的元素上使用 clientHeight 属性，会返回不同的值，因为该属性不包括滚动条的高度。

  • 要获取元素的完整高度，应该将 clientHeight、padding、border 和 margin 相加。

示例代码

案例 1：

<div id="myDiv" style="height: 200px; padding: 20px; border: 1px solid black;">
  This is some text in my div.
</div>

const elem = document.getElementById("myDiv");
const height = elem.clientHeight;
console.log(height); // 输出 240

案例 2：

<div id="scrollableDiv" style="height: 200px; overflow: auto;">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla malesuada justo ut libero interdum, sit amet volutpat risus euismod. </p>
  <p>Aliquam erat volutpat. Mauris viverra lacus et arcu luctus congue id id justo. </p>
  <p>Donec finibus non sapien sit amet ullamcorper. Fusce ut odio malesuada, efficitur ante eu, pulvinar nulla. </p>
  <p>Donec mollis massa at metus placerat, nec ornare justo ultrices. Integer turpis nisi, ultrices ut nibh ac, varius elementum elit. </p>
</div>

const elem = document.getElementById("scrollableDiv");
const height = elem.clientHeight;
console.log(height); // 输出 200
参考链接