首页 > 建站教程 > 前端框架 >  vue $ref 获取DOM节点的宽高正文

vue $ref 获取DOM节点的宽高

JS获取DOM节点的宽高和vue获取其实是一样的,不同点是获取元素的方法不同:

html代码:
<div ref="elememt" ></div>
js代码:
//获取高度值,纯数字
var width= this.$refs.text.offsetWidth;
var height= this.$refs.text.offsetHeight;

//获取元素样式值,element 为元素ref="element",字符串
var width = window.getComputedStyle(this.$refs.element).width;
var height = window.getComputedStyle(this.$refs.element).height;

//获取元素内联样式值,字符串
var width =this.$refs.element.style.width;
var height =this.$refs.element.style.height;