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

原文网址:JS--获取元素的高度与宽度_IT利刃出鞘的博客-CSDN博客

简介

说明

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

读取的方法

document.getElementById("id").clientHeight

元素的尺寸属性

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

示意图

相关推荐
追光少年33221 小时前
Learning Vue 读书笔记 Chapter 4
前端·javascript·vue.js
软件2051 小时前
【Vite + Vue + Ts 项目三个 tsconfig 文件】
前端·javascript·vue.js
老大白菜1 小时前
在 Ubuntu 中使用 FastAPI 创建一个简单的 Web 应用程序
前端·ubuntu·fastapi
渔阳节度使1 小时前
React
前端·react.js·前端框架
LCG元3 小时前
Vue.js组件开发-如何实现异步组件
前端·javascript·vue.js
Lorcian3 小时前
web前端12--表单和表格
前端·css·笔记·html5·visual studio code
问道飞鱼3 小时前
【前端知识】常用CSS样式举例
前端·css
wl85113 小时前
vue入门到实战 三
前端·javascript·vue.js
ljz20164 小时前
本地搭建deepseek-r1
前端·javascript·vue.js
爱是小小的癌4 小时前
Java-数据结构-优先级队列(堆)
java·前端·数据结构