JS--获取元素的高度与宽度

港控/mmm° 2024-03-30 12:24 67阅读 0赞

原文网址：[JS--获取元素的高度与宽度\_IT利刃出鞘的博客-CSDN博客][JS--_IT_-CSDN]

## 简介 ##

**说明**

本文介绍如何使用JavaScript获取HTML标签的高度与宽度。

**读取的方法**

document.getElementById("id").clientHeight

## 元素的尺寸属性 ##

<table style="margin-left:3.15pt;"> 
 <tbody> 
 <tr> 
 <td> 元素尺寸属性 </td> 
 <td> 说明 </td> 
 </tr> 
 <tr> 
 <td> clientWidth </td> 
 <td> 获取元素可视部分的宽度，即 CSS 的 width 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 </td> 
 </tr> 
 <tr> 
 <td> clientHeight </td> 
 <td> 获取元素可视部分的高度，即 CSS 的 height 和 padding 属性值之和，元素边框和滚动条不包括在内，也不包含任何可能的滚动区域 </td> 
 </tr> 
 <tr> 
 <td> offsetWidth </td> 
 <td> 元素在页面中占据的宽度总和，包括 width、padding、border 以及滚动条的宽度 </td> 
 </tr> 
 <tr> 
 <td> offsetHeight </td> 
 <td> 元素在页面中占据的高度总和，包括 height、padding、border 以及滚动条的宽度 </td> 
 </tr> 
 <tr> 
 <td> scrollWidth </td> 
 <td> 当元素设置了 overflow:visible 样式属性时，元素的总宽度，也称滚动宽度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 </td> 
 </tr> 
 <tr> 
 <td> scrollHeight </td> 
 <td> 当元素设置了 overflow:visible 样式属性时，元素的总高度，也称滚动高度。在默认状态下，如果该属性值大于 clientWidth 属性值，则元素会显示滚动条，以便能够翻阅被隐藏的区域 </td> 
 </tr> 
 </tbody> 
</table>

## 示意图 ##

## ![1e640a9c08cb41c5abe7a1d443723478.png][] ##

[JS--_IT_-CSDN]: https://knife.blog.csdn.net/article/details/128450601
[1e640a9c08cb41c5abe7a1d443723478.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/30/60cb21eb95364471a2c42930cd9453d0.png