CSS 中元素的各种宽高

引言

在 CSS 中,可以使用不同的属性和方法获取 DOM 元素的各种宽高,但是这些宽高分别在什么场景下使用?这就需要了解这些宽高的概念了,然而这些又是很容易混淆的。所以,本文就是对这些概念的一个小汇总,在概念混淆的时候方便查阅~

前置知识

$0、console.dir()

$0:在浏览器开发者工具中,表示当前选中的元素

console.dir():以树状结构的形式展示一个对象的属性和方法

CSS 盒子模型

当讨论元素的宽高时,就会涉及到 CSS 盒子模型。所以这里对其进行简要的介绍,先看下图: 这就是 CSS 盒子模型中的一个元素的组成,包括:内容、内边距、边框、外边距这四个部分。除内容外,内边距、边框和外边距都包括上下左右四个方向:padding-top、padding-bottom、padding-left、padding-right;border-top、border-bottom、border-left、border-right;margin-top、margin-bottom、margin-left、margin-right

如果想要了解更详细的,可以查阅 CSS盒子模型

元素的各种宽高

在了解了元素的盒子模型之后,就可以进入关于元素各种宽高的主题了。今天的主角有四对:width,height;clientWidth,clientHeight;offsetWidth,offsetHeight;scrollWidth,scrollHeight

首先,需要获取到 DOM 元素,JavaScript 提供了相应的 DOM API 来获取 DOM 节点:

  • document.getElementById()
  • document.getElementsByClassName()
  • document.querySelector()
  • document.getElementsByTagName()

获取方式举例:

html 复制代码
<div class="elementId"></div>
js 复制代码
const element = document.getElementById('elementId')

width、height

width 和 height 就是盒子模型中内容部分的宽高,这个很好理解~

获取方式:

js 复制代码
const width = element.style.width
const height = element.style.height

注意:element.style.width 仅会返回直接在元素的 style 属性中设置的样式值,而不会返回通过 CSS 样式表或者其他方式设置的样式值

如果是通过 CSS 样式表或者 JavaScript 来设置宽度的,那么 element.style.width 将无法获取到值,所以只有通过内联样式设置的宽高 dom 才能获取到

clientWidth、clientHeight

clientWidth 和 clientHeight 表示:元素内容 + 内边距,不包括边框 border 和 外边距 margin

获取方式:

js 复制代码
const clientWidth = element.clientWidth
const clientHeight = element.clientHeight

offsetWidth、offsetHeight

offsetWidth 和 offsetHeight 表示:元素内容 + 内边距 + 边框,不包括外边距 margin

获取方式:

js 复制代码
const offsetWidth = element.offsetWidth
const offsetHeight = element.offsetHeight

scrollWidth、scrollHeight

  • 在元素内容没有超出换行时,scrollWidth、scrollHeight 和 clientWidth、clientHeight 返回的值一样,都表示:元素的宽高 + 内边距
  • 在元素内容超出换行时,scrollWidth、scrollHeight 表示:文本内容的实际宽高 + 内边距

获取方式:

js 复制代码
const scrollWidth = element.scrollWidth
const scrollHeight = element.scrollHeight
相关推荐
layman052811 分钟前
CSS选择器
前端·css
姜太小白16 分钟前
【前端】jQuery 对数据进行正序排列
前端·javascript·jquery
艾小逗3 小时前
vue3中的effectScope有什么作用,如何使用?如何自动清理
前端·javascript·vue.js
小小小小宇6 小时前
手写 zustand
前端
Hamm6 小时前
用装饰器和ElementPlus,我们在NPM发布了这个好用的表格组件包
前端·vue.js·typescript
小小小小宇7 小时前
前端国际化看这一篇就够了
前端
大G哥7 小时前
PHP标签+注释+html混写+变量
android·开发语言·前端·html·php
whoarethenext7 小时前
html初识
前端·html
小小小小宇7 小时前
一个功能相对完善的前端 Emoji
前端
m0_627827527 小时前
vue中 vue.config.js反向代理
前端