通过id class ref 获取元素的高度和宽度

原创 已于 2022-08-02 16:46:38 修改 · 9.6k 阅读 · 3 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #html #vue.js #jquery #typescript

于 2021-06-27 11:53:25 首次发布
本文介绍了如何使用JavaScript通过ID、Class及Ref获取DOM元素的高度和宽度。分别展示了使用getElementById和getElementsByClassName方法来获取指定ID或Class的元素尺寸，并且提到了在现代框架中利用Ref来直接访问DOM节点。
该文章已生成可运行项目，

dom 结构

<div  id="id1" class="class1" ref="ref1"  style="width: 100px; height: 100px;"></div>

通过 id 获取高度宽度

let  widthid1 = document.getElementById("id1").offsetWidth
let  heightid = document.getElementById("id1").offsetHeight

通过class 获取高度宽度

let  widthclass1 = document.getElementsByClassName("class1").offsetWidth
let  heightclass1 = document.getElementsByClassName("class1").offsetHeight

通过ref 获取高度宽度

let widthref1 = this.$refs.ref1.offsetWidth
let heightref1 = this.$refs.ref1.offsetHeight
本文章已经生成可运行项目
Vue中获取DOM元素高度的方法
MggnHaskell的博客
10-06 1798
在Vue中，可以通过使用ref属性给DOM元素添加一个引用，然后通过$refs对象来获取该DOM元素的引用。通过引用可以获取DOM元素的高度。在Vue中，我们经常需要获取DOM元素的高度，以便进行一些自定义的样式或布局操作。下面介绍几种常用的获取DOM元素高度的方法。这是几种常用的在Vue中获取DOM元素高度的方法。根据实际情况选择合适的方法来获取DOM元素的高度，以便进行后续的操作。我们可以利用计算属性来获取DOM元素的高度。有时候，DOM元素的高度可能在Vue实例的更新周期之后才能获取到。
uniapp 动态获取元素的宽高等信息
HHH917的博客
06-11 4044
前提 下面方法需要在生命周期 mounted 后进行调用。nvue 请看uniapp官网解决方式 官网例子链接：节点信息 https://uniapp.dcloud.io/api/ui/nodes-info?id=createselectorquery 完整代码示例 const query = uni.createSelectorQuery().in(this); query.select('#id').boundingClientRect(data => { console.log("得到布局位
Vue 通过组件的ref获取元素的高度。
u012632105的博客
09-12 6903
属性获取组件的 DOM 元素。获取 DOM 元素之后，可以通过。属性获取了它的高度。最后，我们将获取到的高度打印到控制台中。属性获取元素的高度。在上面的代码中，我们首先定义了一个。方法会被调用，它会打印出。在 Vue 中，可以通过。当我们点击页面中的按钮时，
Web前端之Vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
CSDN博客主页地址：https://mengjian.blog.csdn.net/
04-26 4676
Web前端之Vue通过ref获取元素的宽高、单个或多个ref的处理、多种方法、getComputedStyle
vue 获取 指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）
KLW75
07-14 6万+
使用 vue 的时候，想要获得一个指定的元素的高度时，可以使用 vue 中的ref 。 当 ref 加在普通的元素上，使用 this.ref.name 获取到的是 dom 元素 示例 写在 页面 html 部分的 <div ref="init"></div> 写在 页面 方法 部分 这里的offsetHeight 是返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距） let height= this.$refs.init.offsetHeight...
vue通过ref获取元素高度，结果undefined
m0_63477273的博客
06-03 3962
通过this.$refs.element成功获取元素，但this.$refs.element.offsetHeight等方法获取结果为undefined。解决方法：添加$el，通过this.$refs.element.$el.offsetHeight获取。this.$refs无法获取元素，考虑this指向是否为vue实例，dom元素是否正确绑定ref。
怎么在给dom元素添加class后获取它的宽度
最新发布
11-21
// 获取元素宽度 // 不包括内边距、边框或外边距 const width = element.style.width; // 或者使用 jQuery 的方法（如果引入了 jQuery） // const width = $(element).width(); console.log(width); ``` 如果使用...
JS 获取当前屏幕高度方法和监听dom元素进入视口
weixin_50367873的博客
02-15 4372
js 网页可见区域宽： document.documentElement.clientWidth || document.body.clientWidth 网页可见区域高： document.documentElement.clientHeight || document.body.clientHeight 网页可见区域宽： document.documentElement.offsetWidth || document.body.offsetWidth (包括边线的宽) 网页可见区域高： document
angular中获取dom元素
业余前端的职业经历
05-21 5525
每次讲angular中的特性的时候总是习惯性地拿他和vue进行比较。 vue中获取dom元素的方法 有两种 1.通过js原生获取 如果你想提取获取dom元素的话，有个条件是你得在 mounted 挂载之后的生命周期钩子函数中 进行调用 document.getElementById();document.querySelector(); 2. 就是 vue自带的 ref 给需要dom元素上加一个 ref=“自定义名称” 然后 通过 this.$refs.自定义名称就可以获取到了 好了 复习完 vue的东西
vue2大屏高度和宽度的适配
09-20
// 获取元素宽度 const h_h = this.$refs.home.offsetHeight; // 获取元素高度 let num = 0; w / h > w_w / h_h ? (num = h / h_h) : (num = w / w_w); this.$refs.home.style.transform = `translate(-50%, -...
vue中获取dom高度
qq_21048115的博客
11-17 4817
在 JavaScript 中，可以使用 getBoundingClientRect()以上三种方式获取的元素高度可能存在一定的差异，具体取决于元素的盒模型和样式等因素。函数返回一个包含元素的位置信息（左上角和右下角坐标等）的对象，其中。属性可以获取元素的高度（包括元素的边框、内边距和内容区域）。函数来获取元素的高度。在模板中，可以为元素添加 ref。函数来获取元素的高度。在模板中，可以为元素添加 id。在模板中，可以为元素添加 ref。在 JavaScript 中，可以使用 $refs。
vue3 使用ref 获取 dom 元素的高度
qq_44694453的博客
02-14 1万+
vue3 使用ref 获取 dom 元素的高度
VUE获取元素高度的方法
热门推荐
前端开发
09-17 12万+
Vue获取元素高度. // 当前区域 &lt;div ref="elememt"&gt;&lt;/div&gt; // 获取高度值 （内容高+padding+边框） let height= this.$refs.elememt.offsetHeight; //100 // 获取元素样式值 （存在单位） let height = window.getComputedStyle(this...
获取元素高度宽度
adb96102的博客
03-22 110
我们都知道，对于一个HTML页面元素来说，它的样式定义有两种方式， 一种是写在元素的同行节点，俗称行内样式， 另外一种则是定义在外部的CSS文件中，俗称外部样式， 也就是这两种定义方式，导致我们获取高度的方式有所差异，详...
循环里动态ref命名，获取ref元素宽度
懿_51335316的博客
04-11 582
【代码】循环里动态ref命名，获取ref元素宽度。
获取元素高度与宽度
weixin_45932733的博客
09-09 6891
1.在js中获取元素的高度与宽度,用到这两个api分别为offsetWidth与offsetWidth const width = document.body.offsetWidth const height = document.body.offsetheight 2.同理获取id或者class的高度与宽度同一类似，id与class就是你所取的名字 const width = document.getElementById("id").offsetWidth const height = documen
Vue ref 和 $refs 获取元素宽高
林中明月间丶
10-27 1万+
快速获取节点demo <div ref="div1">123</div> <input type="text" value="123" ref="input1" id="input1"> console.log(this.$refs.div1)//<div>123</div> console.log(this.$refs.inp...
JavaScript 获取元素的高度
BillKu的博客
06-16 1828
javascript复制下载// 返回字符串（如 "50px"）// 转换为数值// 50。
JS原生DOM操作 - 获得元素/网页大小/元素宽高
cherry__yu的博客
04-11 3168
它返回一个对象，其中包含了left、right、top、bottom四个属性，分别对应了该元素的左上角和右下角相对于浏览器窗口（viewport）左上角的距离。scrollHeight和scrollWidth属性提供了元素内容的整体宽度和高度，指包括滚动条在内的视觉面积（包括因溢出而未显示在屏幕上的部分）。每个元素都有offsetTop和offsetLeft属性，表示该元素的左上角与父容器（offsetParent对象）左上角的距离。网页元素的绝对位置，指该元素的左上角相对于整张网页左上角的坐标。
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值