Vue中获取dom元素的宽高

最新推荐文章于 2023-02-17 11:58:32 发布

活宝小娜

最新推荐文章于 2023-02-17 11:58:32 发布

阅读量778

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_44401371/article/details/127360440

版权

vue 专栏收录该内容

16 篇文章 1 订阅

订阅专栏

vue中获取dom元素的宽高

template模板中给dom绑定ref:

<el-carousel
       id="ailabelmap"
       ref="remarkCarusel"
       height="70vh"
       >
 </el-carousel>

js代码中获取:

const width = this.$refs.remarkCarusel.$el.offsetWidth
const height = this.$refs.remarkCarusel.$el.offsetHeight

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

活宝小娜

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中获取dom元素的宽高

vue操作dom元素
复制链接

扫一扫

专栏目录

vue中获取dom高度

m0_50207524的博客

05-28

1218

offsetHeight 属性可以获取元素的高度（包括元素的边框、内边距和内容区域）

解决vue项目获取dom元素宽高总是不准确问题

11-20

dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确： this.$refs.editor[0].offsetHeight; 原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；解决方法：利用Vue.nectTick(callback) this.$nextTick(() => { this.$refs.editor[0].offsetHeight; }) Vue.nectTick() 是在下次DOM更新循环结束之后执行延迟回调补充知识：vue 获取指定元素的高度宽度等（使用vue中的 ref 获取到的是 dom 元素高度或者宽度）使用 vue 的时候，想要

参与评论您还未登录，请先登录后发表或查看评论

在Vue中获取DOM元素的实际宽高

热门推荐

天问博客-专注于大前端技术

07-19

1万+

最近使用 D3.js 开发可视化图表，因为移动端做了 rem 适配，所以需要动态计算获取图表容器的宽高，其中涉及到一些原生DOM API的使用，避免遗忘这里总结一下。

vue获取dom宽度高度

weixin_41463944的博客

06-02

1252

console.log('宽度') console.log(this.$refs['dialogForm'].$el.clientWidth) console.log('高度') console.log(this.$refs['dialogForm'].$el.clientHeight)

在vue中获取dom元素内容的方法

08-30

"在 Vue 中获取 DOM 元素内容的方法" 在 Vue 中获取 DOM 元素内容是开发者经常遇到的问题，而解决这个问题的方法很多，今天我们就来讨论其中的一种，即使用 ref 属性来获取 DOM 元素内容。使用 ref 属性获取 DOM ...

vue获取dom元素注意事项

08-28

vue获取DOM元素注意事项是vue开发中的一個重要知识点。获取DOM元素的高或内容是非常常见的需求，但是很多开发者都遇到了困难。那么，如何正确地获取DOM元素呢？首先，我们需要了解vue的生命周期。vue的生命周期中...

基于vue1和vue2获取dom元素的方法

08-27

下面小编就为大家分享一篇基于vue1和vue2获取dom元素的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

Vue获取dom宽高的方法，以及不准确的解决方案

qq_53679247的博客

02-17

3408

既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。因为当JavaScript线程的正在处理其他JavaScript代码时，其实以已经阻塞了另外的代码，其中包括的setTimeout的定时器部分的实现。其中this.$nextTick是页面渲染完成后的回调函数，当页面渲染完成再进行获取宽高等就比较准确了，但是还是有问题的，如果没用看方法2。这边是用一个setTimeout实现的，其作用是在其他操作执行完毕后才会执行其中的代码，如果有延时的话还会先延时。

Vue动态获取width的方法

12-29

vue里想用Bootstrap的进度条， <div class=progress> <div class=progress-bar role=progressbar aria-valuenow=60 aria-valuemin=0 aria-valuemax=100 xss=removed> <span class=sr-only>20%</span> </div> </div> 主要是把style=”width: 20%;”变成动态获取的。 :style='width:' + perce

VUE获取dom节点的宽高

SuiXJ7083的博客

08-01

2569

获取DOM 宽高

vue获取dom元素的宽高

webuni的博客

12-24

963

vue获取dom元素的宽高

vue中准确获取动态渲染的dom元素的高度

weixin_54009353的博客

12-30

2326

首先监听这个动态元素的变化，在this.$nextTick中获取dom元素，但我获取的时候是不准确的，所以就加了个延时器，就能获取dom元素准确的高度啦 <template> <img ref="bottomBtn" :src="suspendBottomConfig.icon" alt=""> </template> <script> export default{ data(){ return{ suspendBotto...

vue获取不到元素的top但能获取width_元素大小三剑客

weixin_39532699的博客

12-06

407

Offset- 偏移量定义：元素在屏幕上占用的所有可见的空间元素可见的大小由其高度、宽度决定，包括所有内边距，滚动条和边框大小四个属性CSS <style> .son { width: 100px; height: 100px; padding: 10px; border: 10...

javascript中获取dom元素高度和宽度的方法如下：

qq_32910205的博客

03-22

2072

javascript中获取dom元素高度和宽度的方法如下：网页可见区域宽： document.body.clientWidth网页可见区域高： document.body.clientHeight网页可见区域宽： document.body.offsetWidth (包括边线的宽)网页可见区域高： document.body.offsetHeight (包括边线的高)网页正文全文宽： docume...

解决vue项目获取dom元素宽高总是不准确问