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
相关推荐
我是天龙_绍4 小时前
Easing 曲线 easings.net
前端
知识分享小能手4 小时前
微信小程序入门学习教程,从入门到精通,电影之家小程序项目知识点详解 (17)
前端·javascript·学习·微信小程序·小程序·前端框架·vue
訾博ZiBo4 小时前
React组件复用导致的闪烁问题及通用解决方案
前端
Dever4 小时前
记一次 CORS 深水坑:开启 withCredentials 后Response headers 只剩 content-type
前端·javascript
临江仙4554 小时前
流式 Markdown 渲染在 AI 应用中的应用探秘:从原理到优雅实现
前端·vue.js
Hilaku4 小时前
为什么我开始减少逛技术社区,而是去读非技术的书?
前端·javascript·面试
m0_728033134 小时前
JavaWeb——(web.xml)中的(url-pattern)
xml·前端
猪哥帅过吴彦祖4 小时前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl
七月十二4 小时前
[Js]使用highlight.js高亮vue代码
前端
Asort4 小时前
JavaScript设计模式(十二)——代理模式 (Proxy)
前端·javascript·设计模式