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 3917
如obj.style.top、obj.style.wdith等，在读的时候，他们返回的值常常是带有单位的(如px)，同时，对于这种方式，它只能够获取到该元素的行内样式，而并不能获取到该元素最终计算好的样式，这就是在读取属性值得时候和以上只读属性的区别，要获取计算好的样式，请使用obj.currentstyle（IE）和getComputedStyle(IE之外的浏览器)。该属性指的是当元素其中的内容超出其宽高的时候，元素被卷起的高度和宽度，即滚动条宽高度。
JS如何设置和获取盒模型对应的宽和高
banchi6453的博客
09-27 677
㈠方式一：通过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 871
当我们想要知道盒子的尺寸时（存在padding值需要计算/盒子未设置尺寸等情况），用js语法中的。在控制台可以看到盒子的高和宽。
JS获取盒子定位或宽高的方法，你知道几个？
qq_50276105的博客
07-04 2234
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 901
例如，在进行响应式设计时，了解如何精确地获取和操作元素的尺寸可以帮助我们更有效地管理页面布局，避免不必要的重绘和回流，从而提升用户体验。此外，结合现代框架如React或Vue.js，我们可以将上述逻辑封装进组件中，以更加模块化的方式管理和复用代码，这无疑增加了项目的可维护性和扩展性。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。返回的是元素内部区域的宽度和高度（包含padding，但不包含border和margin）。专栏系列（点击解锁）
微信小程序 使用three.js射线点击选中模型，点击子层级模型对应父级名称执行事件
记一下
07-18 865
加载一个街区glb模型，点击不同建筑跳转对应介绍页面。
threejs给模型添加外部轮廓demo
04-10
Three.js支持多种3D格式，如OBJ、FBX、GLTF等，你可以使用对应的加载器（如OBJLoader、GLTFLoader等）将模型导入到场景中。 2. **创建轮廓几何体**：一旦模型加载完成，你需要创建一个与原始模型相似但稍大的几何体...
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
在Three.js中，模型加载通常涉及加载器对象，如GLTFLoader或OBJLoader，它们负责从服务器获取模型数据并将其转化为场景中的对象。"getModelBase"可能就是这类加载器的一部分，用于加载场景的基础框架或底层模型，...
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 414
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
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获取容器的大小（宽高）
热门推荐
weixin_37347069的博客
12-04 1万+
通过JS获取盒模型对应的宽和高，有以下几种方法： 1. dom.style.width/height 这种方式只能取到dom元素内联样式所设置的宽高，也就是说如果该节点的样式是在style标签中或外联的CSS文件中设置的话，通过这种方法是获取不到dom的宽高的。 2. dom.currentStyle.width/height 这种方式获取的是在页面渲染完成后的结果，就是说不管是哪种方式设...
JS盒子模型
wxh2860906464的博客
04-20 1520
JS盒子模型
js操作盒子模型的13个API（client、offset、scroll三大系列）
程展威的博客
11-17 479
js操作盒子模型的13个api 盒子模型： 所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。 js操作盒子模型： 1）操作盒子模型的位置 2）操作盒子模型的大小 不管是操作盒子模型的位置，还是盒子模型的大小，一共有13个api: 三类： client系列 offset系列 scroll系列 1、client系列： clientWidth（
js实现鼠标拖动同时改变两个盒子的高度
weixin_45919023的博客
05-12 815
可视区域里，有顶部固定的区域，下边有两个盒子，通过鼠标拖动让两个盒子高度改变，不要改变body的高度，并且下边盒子可以切换隐藏和显示 代码是这样的 注意：需要引入jquery.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.
js获取盒子模型的高宽
yin_991的博客
01-28 2091
dom.style.width/height 只能获取到内联样式的属性值，外部样式、内部样式的属性值是获取不到的。 dom.currentStyle.width/height        只有ie支持 window.getComputedStyle(dom).width/height   通用性好 dom.getBoundingClientRect().width/height      ...
js盒子模型常用属性
sushans的博客
06-17 9023
1.js盒子模型 指的是通过js中提供的一系列的属性和方法，获取页面中元素的样式信息值 例： #box有很多自己的私有属性： HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype var bo
vue获取cesium 模型所在EGM96高度
最新发布
01-25
### 如何在 Vue 中使用 Cesium 获取模型的 EGM96 高度 为了在 Vue 项目中获取 Cesium 模型所在的 EGM96 高度，需先确保已正确引入并初始化了 Cesium 库[^2]。 #### 初始化 Cesium 和加载地形数据 ```javascript import * as Cesium from 'cesium'; export default { mounted() { this.viewer = new Cesium.Viewer('cesiumContainer', { terrainProvider: new Cesium.CesiumTerrainProvider({ url: 'https://assets.agi.com/stk-terrain/world' }) }); } } ``` 这段代码展示了如何通过 `CesiumTerrainProvider` 加载全球高程数据。这一步骤对于后续计算 EGM96 高度至关重要[^1]。 #### 计算指定位置的 EGM96 高度 要获得特定地理坐标下的 EGM96 高度值，可利用 `sampleHeight` 方法： ```javascript async function getHeightAtPosition(longitude, latitude) { const heightPromise = viewer.scene.globe.heightmapHeights; let positionCartographic = Cesium.Cartographic.fromDegrees(longitude, latitude); let ellipsoidSurfacePoint = Cesium.Cartesian3.fromRadians(positionCartographic.longitude, positionCartographic.latitude); var promise = Cesium.sampleTerrainMostDetailed(viewer.terrainProvider, [positionCartographic]); await Cesium.when(promise, function(updatedPositions){ console.log(Cesium.Math.toDegrees(updatedPositions[0].height)); }); return updatedPositions[0].height; } // 使用方法如下： getHeightAtPosition(116.4074, 39.9042); // 北京市经纬度为例 ``` 此段代码定义了一个异步函数用于查询给定经度纬度对应的 EGM96 高度，并打印出来。注意这里调用了 `Cesium.sampleTerrainMostDetailed()` 来精确采样地形高度。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值