看到这个问题我第一时间想的竟然是JS

不知道你是怎么想的

不过昨天有一个小哥哥 问我一个Vue的 哈哈哈 get了

我当时问他为什么不用JS获取 他说 这个性能更高

那我们来看看这个高性能的获取元素高度的宝贝

辣就是利用vue的ref属性

听说这个性能很高……emmmm

然后把它打印出来 自己找自己想要的吧

//获取高度值

var h= this.$refs.test.offsetHeight; 

//获取元素样式值,element 为元素ref="element"

var heightCss = window.getComputedStyle(this.$refs.test).height; 

//获取元素内联样式值

var heightStyle =this.$refs.test.style.height; // 这里面会找到你要的所有的样式属性值

If you like me, please give me a lot of praise ^ v ^  

Thank you very much! mua~

Vue 获取元素样式 元素高度的更多相关文章

  1. vue获取dom元素高度的方法

    获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...

  2. vue 获取元素高度

    1.html <div ref="getheight"></div> <br><br> 2.JavaScript // 获取高度值 ...

  3. jquery获取和设置元素高度宽度

    jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...

  4. js获取元素的滚动高度，和距离顶部的高度

    jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...

  5. vue获取DOM元素并设置属性

    这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...

  6. jquery获取元素与屏幕高度距离

    a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...

  7. jq 获取各个元素的宽度高度的方法

    JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...

  8. js学习进阶-元素获取及样式设置

    var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...

  9. js学习笔记7----return，arguments及获取元素样式

    1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...

随机推荐

  1. C# 反射,动态类,动态方法

    1.动态类名,固定方法名,例如.调用不同类下边的GetById()方法: //项目需要引用Miscorsoft.CSharp类库,否则会报错:找不到编译动态表达式所需的一个或者多个类型.//引用这两个 ...

  2. C# Global定时执行Global文件aTimer处理

    public class Global : System.Web.HttpApplication { private static event Action eventActions; /// < ...

  3. Android 开发 音视频从入门到提高 任务列表 转载

    <Android 音视频从入门到提高 —— 任务列表> 1. 在 Android 平台绘制一张图片,使用至少 3 种不同的 API,ImageView,SurfaceView,自定义 Vi ...

  4. 图像处理、显示中的行宽（linesize）、步长（stride）、间距（pitch）

    在图像数据传输和显示的过程中有一个不常用的参数:间距. 间距的名称:它有很多的别名,在使用d3d显示的时候,它叫pitch:在用ffmpeg解码的时候,它叫linesize: 在用ffmpeg转换格式 ...

  5. 【HDFS API编程】查看目标文件夹下的所有文件、递归查看目标文件夹下的所有文件

    使用hadoop命令:hadoop fs -ls /hdfsapi/test  我们能够查看HDFS文件系统/hdfsapi/test目录下的所有文件信息 那么使用代码怎么写呢?直接先上代码:(这之后 ...

  6. python 获取中文拼音首字母；判断文件夹是否存在

    1.如何获取中文字符串的首字母 import pinyin #输入name def get_pinyin_first_alpha(name): return "".join([i[ ...

  7. python爬虫相关

    一.Python re模块的基本用法: https://blog.csdn.net/chenmozhe22/article/details/80601971 二.爬取网页图片 https://www. ...

  8. 使用Feign调用服务的问题

    最近在搞微服务的东西,系统A提供了一个服务,定义方式: @RequestMapping(value = "/hasSuberList", method = RequestMetho ...

  9. python--对象实例化过程

    实例化过程: class luffy_stu: def __init__(self,name,age,sex): self.name = name self.age = age self.sex = ...

  10. oracle SQL多表查询

    SQL多表查询 1.集合理论 1.1 什么是集合 具有某种特定性质的事物的总体. 集合的特性:无序性.互异性.确定性. 一个集合可以小到从一个表中取出一行中的一列.              1 ro ...