JS如何设置获取盒模型对应的宽高

最新推荐文章于 2025-01-09 11:18:27 发布
置顶 最新推荐文章于 2025-01-09 11:18:27 发布
阅读量3k 收藏 2
点赞数
CC 4.0 BY-SA版权
文章标签： 获取盒模型对应的宽高 js 兼容性 通用性 计算元素绝对位置
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/a_small_insect/article/details/79518439
本文介绍了四种获取HTML元素尺寸的方法：使用`dom.style`获取内联样式宽度和高度；利用`dom.currentStyle`获取渲染后的尺寸（仅IE支持）；通过`window.getComputedStyle`获取兼容性更好的元素尺寸；运用`dom.getBoundingClientRect`计算元素绝对位置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  1. dom.style.width/height(只适用获取内联元素的宽和高)
  2. dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持)
  3. window.getComputedStyle(dom).width/height(与2原理相似，但是兼容性，通用性会更好一些)
  4. dom.getBoundingClientRect().widht/height(计算元素绝对位置，获取到四个元素left,top,width,height)

一号窗
关注
js 获取元素位置和大小_js 位置_Js宽度高度（详解）
天马3798
12-10 3915
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
JS如何设置和获取盒模型对应的宽和高
banchi6453的博客
09-27 676
㈠方式一：通过DOM节点的 style 样式获取 dom.style.width/height只能获取使用内联样式的元素的宽和高。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>>js获取盒模...
JS获取和设置盒模型对应的宽和高的四种方法
weixin_30338481的博客
08-02 734
工作中，对dom元素取宽高位置的情况并不少见，这篇就总结一下，如何用JS设置和获取盒模型的宽和高，以及，哪种方式才是最优选择。 1. dom.style.width/height 这种方法只能获取到内联样式的宽和高，而样式一般不回以内联方式写，所以这种方式不适用现在大多数的开发； 2.dom.currentStyle.width/height 这种方式只适用于IE，直接P...
用js获取盒子的宽高
m0_53852077的博客
04-12 870
当我们想要知道盒子的尺寸时（存在padding值需要计算/盒子未设置尺寸等情况），用js语法中的。在控制台可以看到盒子的高和宽。
JS获取盒子定位或宽高的方法，你知道几个？
qq_50276105的博客
07-04 2232
offsetHeight=盒子高+padding值+border值+横向滚动条宽。offsetWidth=盒子宽+padding值+border值+纵向滚动条宽。outerHeight=盒子高+padding值+border值+滚动条宽。outerWidth=盒子宽+padding值+border值+滚动条宽。)=盒子宽+padding值+border值+margin值+滚动条宽。)=盒子高+padding值+border值+margin值+滚动条宽。scrollHeight=盒子的高+padding值。
js设置盒模型的宽高几种方式优劣
weixin_45514320的博客
04-22 279
1.dom.style.width/height 这种方式不支持来自外链的CSS样式表 2.dom.currentStyle.width/height 这种方式仅IE支持 3.window.getComputedStyle(dom).widht/height 相比第二种方法来说 兼容性是较好一点的 4.dom.getBondingClientRect().width/height 获取绝对位置 ...
JS 获取盒子模型对应的高宽
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
01-09 896
例如，在进行响应式设计时，了解如何精确地获取和操作元素的尺寸可以帮助我们更有效地管理页面布局，避免不必要的重绘和回流，从而提升用户体验。此外，结合现代框架如React或Vue.js，我们可以将上述逻辑封装进组件中，以更加模块化的方式管理和复用代码，这无疑增加了项目的可维护性和扩展性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。返回的是元素内部区域的宽度和高度（包含padding，但不包含border和margin）。专栏系列（点击解锁）
微信小程序 使用three.js射线点击选中模型，点击子层级模型对应父级名称执行事件
记一下
07-18 862
加载一个街区glb模型，点击不同建筑跳转对应介绍页面。
threejs给模型添加外部轮廓demo
04-10
Three.js支持多种3D格式，如OBJ、FBX、GLTF等，你可以使用对应的加载器（如OBJLoader、GLTFLoader等）将模型导入到场景中。 2. **创建轮廓几何体**：一旦模型加载完成，你需要创建一个与原始模型相似但稍大的几何体...
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
在Three.js中，模型加载通常涉及加载器对象，如GLTFLoader或OBJLoader，它们负责从服务器获取模型数据并将其转化为场景中的对象。"getModelBase"可能就是这类加载器的一部分，用于加载场景的基础框架或底层模型，...
【JavaScript-17】BOM-04 获取页面宽高、盒子宽高
前端代码小白的日常博客
08-02 1351
获得body的值，清空内外边距之后与以上两个相同,不包含内外边距，滚动条。兼容低版本的ie，页面可视的宽高不包含控制台，菜单栏，滚动条宽度。​//当父级有定位时，偏移量计算的是本身到有定位的父级的距离。​//当父级没有定位时，偏移量计算的是本身到页面的距离。​//当本身脱标时，偏移量就是本身的left/top。不包含控制台、菜单栏(低配版的ie不支持)，包含滚动条。获取的是实际宽度+内边距+边框=实际盒子的宽度。屏幕大小发生变化时触发。...
CSS 盒子模型（Box Model）-----js获取容器的宽高位置尺寸
yiyueqinghui的博客
07-12 2351
盒模型的组成：由content（内容区域），padding（内边距），border（边框），margin（外边距）组成。 盒模型有两种标准：一种是标准盒子模型（W3C盒子模型），另一种是IE盒子模型（怪异盒子模型）。 两种标准的区别：这两种标准对容器的 height 和 width 的计算方式不同， 标准盒子模型只包括 content， IE盒子模型为 content + padding + border 。 可以通过CSS属性 box-sizing 来对这两种标准进行切换， 当值为 content-bo.
Javascript获取一个盒子的宽和高；
热门推荐
qq_32439313的博客
03-27 1万+
    使用offsetWidth获取高度，offsetHight获取宽度。    var width = document.getElementById("box2").offsetWidth;//宽度 var height = document.getElementById("box2").offsetHeight;//
JS如何获取盒模型对应的宽和高
包磊磊的博客
04-11 670
（1）dom.style.width/height只能取到行内样式的宽和高，style 标签中和 link 外链的样式取不到。 （2）dom.currentStyle.width/height（只有IE兼容）取到的是最终渲染后的宽和高 （3）window.getComputedStyle(dom).width/height同（2）但是多浏览器支持，IE9 以上支持。 （4）dom.getBo...
JS 获取盒子模型对应的高宽(window.getComputedStyle、dom.getBoundingClientRect)
黄彪博客
01-28 1891
文章目录文章参考获取dom节点高宽的通用方法案例说明getBoundingClientRect() 获取DOM 的高度和宽度的办法？ 文章参考 原生js操作dom添加删除替换class 你了解getBoundingClientRect（）？ 获取dom节点高宽的通用方法 dom.style.width/height(只适用获取内联元素的宽和高) dom.currentStyle.width/height(获取渲染后的宽高，但是仅IE支持) window.getComputedStyle(do
JS之盒子的宽高问题，鼠标在盒子中跟随，拖拽，图片切换，滑动验证，放大镜功能的实现等
WyHHZKA的博客
12-28 1085
JS之盒子的宽高问题，鼠标在盒子中跟随，拖拽，图片切换，滑动验证，放大镜功能的实现等
js获取盒子模型的高宽
yin_991的博客
01-28 2091
dom.style.width/height 只能获取到内联样式的属性值，外部样式、内部样式的属性值是获取不到的。 dom.currentStyle.width/height        只有ie支持 window.getComputedStyle(dom).width/height   通用性好 dom.getBoundingClientRect().width/height      ...
获取盒子模型的宽高，获取元素的宽高示例
ForMyQianDuan的博客
04-27 2211
&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 获取盒模型宽高的几种方法
weixin_41643133的博客
03-21 1886
盒模型 标准模型 IE模型 两种模型都包括（从外向里）margin、border、padding、content 不同的是：较width、height而言，1 只包括content内容，而2则包括border、padding； 如何设置两种模型呢？ 1: box-sizing: content-box 2: box-sizing: border-box 以上内容与标题无任何关系，纯粹巴...
vue获取cesium 模型所在EGM96高度
最新发布
01-25
### 如何在 Vue 中使用 Cesium 获取模型的 EGM96 高度 为了在 Vue 项目中获取 Cesium 模型所在的 EGM96 高度，需先确保已正确引入并初始化了 Cesium 库[^2]。 #### 初始化 Cesium 和加载地形数据 ```javascript ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值