Vue中获取元素宽高
<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中获取元素宽高的更多相关文章
- 从H264码流中获取视频宽高 (SPS帧) 升级篇
之前写过 <从H264码流中获取视频宽高 (SPS帧)> . 但发现很多局限性,而且有时解出来是错误的. 所以重新去研究了. 用了 官方提供的代码库来解析. 花了点时间,从代码库里单独把解 ...
- 原生JS获取元素宽高实践详解
开篇的话 任何不是亲身实践中求得的知识,都不是属于你的.任何求得的知识不去时常温习运用,也不是属于你的. 记录由来 在做个上拉广告功能中遇到了一个"理所当然"觉得对的用法,慢慢才排 ...
- JS获取元素宽高的两种情况
JS获取元素宽高分两种情况, 一.内联样式,也就是直接把width和height写在HTML元素中的style里: 这种情况使用 document.getElementById('xxx'). ...
- Activity启动过程中获取组件宽高的五种方式
第一种:(重写Activity的onWindowFocusChanged方法) /** * 重写Acitivty的onWindowFocusChanged方法 */ @Override public ...
- 微信小程序之动态获取元素宽高
我以前一直以为微信小程序不能动态获取view元素的宽高.但是自从看到: wx.createSelectorQuery() 这个api接口,以前的某些问题就能得到解决了... 那么,这个api接口怎么用 ...
- vue 动态获取div宽高有时候为0的情况
项目背景: 需要使用echarts进行图表展示.由于div宽高是不固定的,因此需要先获取父级的宽高再把值赋予到图表的div中. 需要使用 this.$nextTick(() => { }) ...
- 从H264码流中获取视频宽高 (SPS帧)
获取.h264视频宽高的方法 花了2个通宵终于搞定.(后面附上完整代码) http://write.blog.csdn.net/postedit/7852406 图像的高和宽在H264的SPS帧中.在 ...
- 滚动加载图片(懒加载)实现原理(这是旧实现,仅做为获取元素宽高api的参考)
https://www.cnblogs.com/flyromance/p/5042187.html 本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出 一.什么是图片滚动加载 ...
- js获取元素宽高、位置相关知识汇总
常见clientWidth.clientHeight.offsetWidth.offsetLeft,clientX.scrollTop等词语,比较混乱,现在总结下他们的区别. 1. clientWid ...
随机推荐
- Python:matplotlib.pyplot
翻译总结自:matplotlib.pyplot - Matplotlib 3.4.3 documentation 函数 说明 acorr x的自相关性图 angle_spectrum 角度谱 anno ...
- ValueError: not enough values to unpack
当在同一行为两个变量赋值时,要用分号;而非逗号,隔开
- js和C# 编码 解码
C#中对URL编码的方法... 编码:Server.UrlEncode(string) 解码:Server.UrlDecode(string) HttpUtility.UrlEncode(string ...
- tf源码中的object_detection_tutorial.ipynb文件
今天看到原来下载的tf源码的目标检测源码中test的代码不知道跑哪儿去了,这里记录一下... Imports import numpy as np import os import six.moves ...
- 『现学现忘』Docker相关概念 — 3、IaaS、SaaS、PaaS服务模式补充
目录 1.IaaS服务模式 2.PaaS服务模式 (1)何时使用PaaS (2)PaaS的特点 (3)PaaS优势 3.SaaS服务模式 云计算通俗来说就是输入/输出和计算不在一个主机上.计算要用到计 ...
- PHP高并发商城秒杀
1.什么是秒杀 秒杀活动是一些购物平台推出的集中人气的活动,一般商品数量很少,价格很便宜,限定开始购买的时间,会在以秒为单位的时间内被购买一空.比如原价千元甚至万元的商品以一元的价格出售,但数量只有一 ...
- 腾讯2021LIGHT公益创新挑战赛赛题分析
前些日子老师让我们报名了LIGHT挑战赛,之后又简单的进行了分析,今天我总结复盘一下,一是为了捋一下自己选题的思路,二是以后遇见类似的项目,更容易找到方向或者触类旁通. 赛题介绍 赛题一:安全教育/保 ...
- ArcMap操作随记(4)
1.统计各省份公路长度 [标识]→[汇总]→[视图][创建] 2.用户登录分配 [创建渔网]→[连接] 3.城市超市影响范围 [创建泰森多边形]→[标识]→[汇总] 4.三维可视化分析 [构造视线]→ ...
- 如何使用Google Analytics Universal Analytics增强型电子商务
Google Analytics: Universal Analytics增强型电子商务,可以让运营人员轻松地跟踪用户在其购物历程中与产品的互动,包括产品展示.产品点击.查看产品详情.将产品添加到购物 ...
- js 中的值类型和引用类型
javascript中值类型(基本类型):number,string,bool,undefined,null(这5种基本数据类型是按值访问的,因为可以操作保存在变量中的实际的值) 引用类型:对象(Ob ...