Vue 获取元素样式 元素高度
看到这个问题我第一时间想的竟然是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 获取元素样式 元素高度的更多相关文章
- vue获取dom元素高度的方法
获取高度: <div ref="自定义名称" > </div>要在钩子mounted里面dom结构生成后去获取dom的高度,宽度,修改样式等操作!!! mo ...
- vue 获取元素高度
1.html <div ref="getheight"></div> <br><br> 2.JavaScript // 获取高度值 ...
- jquery获取和设置元素高度宽度
jquery获取和设置元素高度宽度 1.height()/ width() 取得第一个匹配元素当前计算的高度/宽度值(px) height(val)/ width(val) 为每个匹配的元素设置CSS ...
- js获取元素的滚动高度,和距离顶部的高度
jq: 获取浏览器显示区域(可视区域)的高度 : $(window).height(); 获取浏览器显示区域(可视区域)的宽度 : $(window).width(); 获取页面的文档高度 $(doc ...
- vue获取DOM元素并设置属性
这里我想到了2个方法: 方法一: 直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式 方法二: 使用ref,给相 ...
- jquery获取元素与屏幕高度距离
a. onscroll事件 scroll是css样式中overflow的一个值,意思是显示滚动条;当一个元素的实际高度超过他的最大高度是,只要设置了overflow为scroll b. $(..).s ...
- jq 获取各个元素的宽度高度的方法
JS获取各种宽度.高度的简单介绍: scrollHeight: 获取对象的滚动高度. scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获 ...
- js学习进阶-元素获取及样式设置
var imgs = document.querySelectorAll("article img"); 获得article元素的直接或间接子孙的所有img元素, <arti ...
- js学习笔记7----return,arguments及获取元素样式
1.return:返回值 1)函数名+括号:fn() ===> return; 2) 所有函数默认返回值:undefind; 3) return后面所有的代码都不会执行; 2.arguments ...
随机推荐
- OPNET下op_pk_copy()函数使用注意事项
1)op_pk_copy()是生成新的数据包,函数op_pk_create_time_get()获取的是新数据包的生成时间.在统计数据包的端到端时延,以及服务时延需要注意. 2)此外发用数据包时使用o ...
- kolla queens on centos7.5 -all in one
目录 环境准备 开始配置 快照,快照,快照 pull镜像并部署 登录配置OpenStack 环境准备 我这里用workstation创建了一个虚拟机,安装centos7.5 mini系统,这台虚拟机上 ...
- JavaScript数组方法--slice、sort、splice
数组常用方法应该只剩下最后这哥仨了,他们都是最早的ECMA-262标准的方法,结果写着写着,居然把他们写到最后了. slice:slice() 方法返回一个新的数组对象,这一对象是一个由 begin和 ...
- oo 第一次博客作业
oo 第一次博客作业 早在大一就听说了oo的各种传奇故事,大二下学期终于也开始了我的oo之旅. 基于度量来分析自己的程序结构 第一次作业 类图分析 耦合度分析 可以看出在第一次作业中,我的耦合度非常高 ...
- LeetCode 104. Maximum Depth of Binary Tree二叉树的最大深度 C++/Java
Given a binary tree, find its maximum depth. The maximum depth is the number of nodes along the long ...
- JUnit4源码学习笔记
先上一个在Spring-test下运行的调用栈 自底向上: JUnitStarter IDEA对JUnit的支持,调用JUnitCore.run(Runner),将注解@RunWith指定的Runne ...
- [SQL]删除约束
来源:http://www.archonsystems.com/devblog/2012/05/25/how-to-drop-a-column-with-a-default-value-constra ...
- Linux 内核的 Makefile
Linux内核的配置系统的基本结构 Linux内核的配置系统由三个部分组成,分别是: 1.Makefile:分布在 Linux 内核源代码根目录及各层目录中,定义 Linux 内核的编译规则: 2.配 ...
- 5.LNMP(Linux + Nginx + MySQL + PHP)环境安装
1.安装Nginx: yum install yum-priorities -y wget http://nginx.org/packages/centos/7/noarch/RPMS/nginx-r ...
- 中兴iptv机顶盒破解教程图文:亲测中兴B760EV3、B860A、B860AV1.1完美安装应用!非ttl破解![转]
一直以为中兴的这几个盒子只能通过ttl来破解,不过现在再也不用这么麻烦了,有了这个工具,前后破解不超3分钟!理论上支持所有中兴的iptv机顶盒的破解! 亲测中兴B760EV3.B860A.B860AV ...