看到这个问题我第一时间想的竟然是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. JS面试Q&A(续2): Rest parameter,Arrow function 等

    rest parameter 和 Destructuring assignment. function fun1(...theArgs) { console.log(theArgs.length);} ...

  2. PostgreSQL函数(存储过程)----笔记

    PostgreSQL 函数也称为 PostgreSQL 存储过程. PostgreSQL 函数或存储过程是存储在数据库服务器上并可以使用SQL界面调用的一组SQL和过程语句(声明,分配,循环,控制流程 ...

  3. 渐进反馈式搜索技术助力运维工程师——Linux命令高效检索

    日常生活工作中,我们通过搜索引擎查询相关资料时,经常遇到不知如何指定准确关键词的情况,仅仅根据指定大概范围的关键词时,搜索结果往往不能尽如人意. <信息导航>APP最新版本(Ver 1.1 ...

  4. Mssql合并查询结果

    在项目开发中,有时会碰到将列记录合并为一行的情况,例如根据地区将人员姓名合并,或根据拼音首字母合并城市等,下面就以根据地区将人员姓名合并为例,详细讲一下合并的方法. 首先,先建一个表,并添加一些数据, ...

  5. python大法好——飞机大战

    import pygame from pygame.locals import * import time def key_control(hero_temp): # 获取事件,比如按键等 for e ...

  6. redis锁机制介绍与实例

    转自:https://m.jb51.net/article/154421.htm 今天小编就为大家分享一篇关于redis锁机制介绍与实例,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要 ...

  7. mysql 线程操作

    show processlist;//查询mysql所有连接线程 SELECT CONCAT('KILL ',id,';') FROM information_schema.`PROCESSLIST` ...

  8. python之路:模块初识

    python王者开发之路:模块初识 模块初识我现在讲的确有点早.不过没关系,后面我会详细说模块. 模块,也就是库,是python三剑客之一.这三剑客,函数.库和类,都是由程序编写而成的.之所以我先说模 ...

  9. cmake安装

    下载之后 1.解压 root@zsh-linux:/opt#tar -zxvf  cmake-2.8.4.tar.gz 2.然后 cd 到cmake-2.8.4目录下  安装 root@zsh-lin ...

  10. Redis阻塞诊断基础

    slowlog Redis慢查询 slowlog 参数 slowlog-log-slower-than: 慢查询时间阈值,超过这个阈值的查询将会被记录,默认值10000,但是微妙,也即10毫秒. sl ...