<div ref="init"></div> 

写在 页面 方法 部分

这里的 offsetHeight 是返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

let height= this.$refs.init.$el.offsetHeight;  

这里的offsetHeight可以替换,用来获取其他的属性

offsetWidth       //返回元素的宽度(包括元素宽度、内边距和边框,不包括外边距)

offsetHeight      //返回元素的高度(包括元素高度、内边距和边框,不包括外边距)

clientWidth        //返回元素的宽度(包括元素宽度、内边距,不包括边框和外边距)

clientHeight       //返回元素的高度(包括元素高度、内边距,不包括边框和外边距)

style.width         //返回元素的宽度(包括元素宽度,不包括内边距、边框和外边距)

style.height       //返回元素的高度(包括元素高度,不包括内边距、边框和外边距)

scrollWidth       //返回元素的宽度(包括元素宽度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientWidth相同

scrollHeigh       //返回元素的高度(包括元素高度、内边距和溢出尺寸,不包括边框和外边距),无溢出的情况,与clientHeight相同

除此之外,还可以获取带有单位的数值

let height = window.getComputedStyle(this.$refs.init).height; 

这样获取的值是有单位的。

Vue中获取元素宽高的更多相关文章

  1. 从H264码流中获取视频宽高 (SPS帧) 升级篇

    之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...

  2. 原生JS获取元素宽高实践详解

    开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...

  3. JS获取元素宽高的两种情况

    JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用     document.getElementById('xxx'). ...

  4. Activity启动过程中获取组件宽高的五种方式

    第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...

  5. 微信小程序之动态获取元素宽高

    我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...

  6. vue 动态获取div宽高有时候为0的情况

    项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => {    }) ...

  7. 从H264码流中获取视频宽高 (SPS帧)

    获取.h264视频宽高的方法 花了2个通宵终于搞定.(后面附上完整代码) http://write.blog.csdn.net/postedit/7852406 图像的高和宽在H264的SPS帧中.在 ...

  8. 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)

    https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...

  9. js获取元素宽高、位置相关知识汇总

    常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...

随机推荐

  1. docker安装以及常用命令

    yum-config-manager 对/etc/yum.repos.d/下的.repo文件进行增删改查 yum install -y yum-utils 添加docker源,由于yum源的docke ...

  2. JavaSE高级编程之多线程

    4. 多线程 4.1 基本概念:程序.进程和线程 程序.进程和线程 程序:为了完成特定的任务,用某种语言编写的一组指令的集合.程序是一段静态的代码,静态对象. 进程:是程序的一次执行过程或正在运行的程 ...

  3. Leaflet:LayerGroup、FeatureGroup

    LayerGroup(Layer) Layer 用法:把一些Layer集中到一个组Group中,以便作为一个整体进行操作.如果把该Group加入到了Map中,任何从这个Group增加或者移除Layer ...

  4. pyqt(三)

    六.按钮控件 QPushButton 常见的按钮实现类包括:QPushButton.QRadioButton和QCheckBox QPushButton是最普通的按钮控件,可以响应一些用户的事件 fr ...

  5. rodert教你学FFmpeg实战这一篇就够了

    rodert教你学FFmpeg实战这一篇就够了 建议收藏,以备查阅 pdf阅读版: 链接:https://pan.baidu.com/s/11kIaq5V6A_pFX3yVoTUvzA 提取码:jav ...

  6. github:git clone下载加速以及vim-plug下载插件加速

    git clone 下载加速 1. 先在github将仓库地址复制下来 2. git clone时将https://github.com/* 改为https://gitclone.com/github ...

  7. 采用二进制文件方式安装loki和promtail

    1. 下载二进制文件 官方下载地址:https://github.com/grafana/loki/releases 下载如图所示的这俩文件,Grafana采用yum方式安装 cd /usr/loca ...

  8. Python之VSCode

    在学习Python的过程中,一直没有找到比较趁手的第三方编辑器,用的最多的还是Python自带的编辑器.由于本人用惯了宇宙第一IDE(Visual Studio),所以当Visual Studio C ...

  9. .user.ini文件构成的PHP后门

    .user.ini.它比.htaccess用的更广,不管是nginx/apache/IIS,只要是以fastcgi运行的php都可以用这个方法.我的nginx服务器全部是fpm/fastcgi,我的I ...

  10. JSP有哪些动作?分别是什么?

    外JSP共有以下7种基本动作 jsp:include:在页面被请求的时候引入一个文件. jsp:useBean:寻找或者实例化一个JavaBean. jsp:setProperty:设置JavaBea ...