用js获取盒子的宽高

已于 2024-04-12 18:59:43 修改
阅读量457 收藏
点赞数 5
文章标签： javascript 前端 开发语言
于 2024-04-12 16:46:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_53852077/article/details/137686568
版权

当我们想要知道盒子的尺寸时（存在padding值需要计算/盒子未设置尺寸等情况），用js语法中的clientWidth和clientHeight（可视区：不包含border、margin和滚动条）

或者

offsetWidth和offsetHeight（包含元素自身宽高、padding、border、滚动条等）可以实现

以下是clientWidth和clientHeightd的示例代码，后者的方法大同小异

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>

<body>
  <div>************<br>
    ************<br>
    ************<br>
  </div>
  <script>
    // 获取div元素
    const div = document.querySelector('div')
    //在控制台打印尺寸
    console.log(div.clientHeight)
    console.log(div.clientWidth)
  </script>
</body>

</html>

在控制台可以看到盒子的高和宽

李小白(●—●)
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
js怎样获取div元素的宽度
10-13 4660
有些时候需要获取到div的宽度 在线编程地址https://www.w3school.com.cn/tiy/t.asp?f=html_basic <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="...
javascript获取网页宽高方法汇总
10-23
本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。
dom操作获取盒子宽高位置的三种方法,offset/scroll/client三大家族使用详解(附源码及注释)
m0_67805754的博客
04-27 2379
<style> body { height: 2000px; } .box { width: 500px; height: 300px; border: 20px solid #000; padding: 10px; margin: 100px auto; overflow: scroll; } </style> <div class="box"...
JS获取盒子定位或宽高的方法，你知道几个？
最新发布
qq_50276105的博客
07-04 1549
offsetHeight=盒子高+padding值+border值+横向滚动条宽。offsetWidth=盒子宽+padding值+border值+纵向滚动条宽。outerHeight=盒子高+padding值+border值+滚动条宽。outerWidth=盒子宽+padding值+border值+滚动条宽。)=盒子宽+padding值+border值+margin值+滚动条宽。)=盒子高+padding值+border值+margin值+滚动条宽。scrollHeight=盒子的高+padding值。
jQuery--获取盒子宽高
Yannnnnm的博客
11-07 1902
本篇主要介绍如何获取盒子的宽高 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> he
js获取盒子模型的高宽
yin_991的博客
01-28 2002
dom.style.width/height 只能获取到内联样式的属性值，外部样式、内部样式的属性值是获取不到的。 dom.currentStyle.width/height        只有ie支持 window.getComputedStyle(dom).width/height   通用性好 dom.getBoundingClientRect().width/height      ...
js获取容器高度
killerdoubie的博客
03-09 522
js获取容器高度
js判断图片加载完成后获取图片实际宽高的方法
10-22
主要介绍了js判断图片加载完成后获取图片实际宽高的方法,涉及JavaScript图片加载及属性操作相关技巧,需要的朋友可以参考下
js获取图片宽高的方法
10-23
主要介绍了js获取图片宽高的方法，快速获取图片的宽高其实是为了预先做好排版样式布局做准备，需要的朋友可以参考下
js兼容火狐获取图片宽和高的方法
10-24
主要介绍了js兼容火狐获取图片宽和高的方法,涉及javascript图片操作的相关技巧,需要的朋友可以参考下
原生js获取宽高与jquery获取宽高的方法关系对比
10-26
主要介绍了原生js获取宽高与jquery获取宽高的方法关系对比,需要的朋友可以参考下
JS如何获取盒模型的宽和高
weixin_34395205的博客
11-19 778
1）、node.style.width/height 这种方式只能取到dom元素内嵌样式的宽和高，通过外联样式link引入和在style标签中设置的样式这两者都是获取不到node的宽和高的，即只有这种： <p style="width:100px;height:50px">test</p> 但用这种方式可以设置node的宽与高，举个例子： documen...
js 获取盒模型宽高的几种方法
weixin_41643133的博客
03-21 1791
盒模型 标准模型 IE模型 两种模型都包括（从外向里）margin、border、padding、content 不同的是：较width、height而言，1 只包括content内容，而2则包括border、padding； 如何设置两种模型呢？ 1: box-sizing: content-box 2: box-sizing: border-box 以上内容与标题无任何关系，纯粹巴...
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 337
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
JS、JQuery获取各种高度和元素距离
ksx2333的博客
04-01 4905
文章目录前言1 js原生1.1 offset系列1.2 client系列1.3 scroll系列2 jquery写法2.1 offset和position2.2 元素滚动2.2.1 scrollTop()2.2.2 $(document.body).scrollTop+ $(document.documentElement).scrollTop()2.2.3 $('body,html').scrollTop(60)2.3 元素的尺寸2.3.1 内容尺寸 与css中设置的响应的属性相同2.3.2 内部尺寸2.
CSS 盒子模型（Box Model）-----js获取容器的宽高位置尺寸
yiyueqinghui的博客
07-12 2065
盒模型的组成：由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。 盒模型有两种标准：一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。 两种标准的区别：这两种标准对容器的 height 和 width 的计算方式不同， 标准盒子模型只包括 content， IE盒子模型为 content + padding + border 。 可以通过CSS属性 box-sizing 来对这两种标准进行切换， 当值为 content-bo.
获取盒子模型的宽高，获取元素的宽高示例
ForMyQianDuan的博客
04-27 2126
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;获取盒子模型的宽高 &lt;/title&gt; &lt;style&gt; #dv1 {
JS 获得DIV 的动态大小的方法以及注意事项
退休码农的自留地
10-17 367
这个网上方法很多，笔者也是参考了很多。为啥呢，因为获得高度要么是100% 要么是0。后来才发现原因是：需要获得高度的DIV没有显示出来。注意事项再说一遍：一定要使目的对象处于可视状态。
vue js 获取盒子的高度
05-11
你可以使用 Vue.js 的 `ref` 属性来获取一个元素的高度。`ref` 允许你为元素添加一个引用，然后在 Vue 实例中使用 `$refs` 来获取该元素的引用。 例如，假设你有一个元素如下： ```html 这是一个盒子 ``` 你可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值