vue 获取dom的css属性值
<template> <div id="topInfo" ref="topInfo" style="width: 200px;height: 200px;background-color: #0bb20c"> <img id="imgInfo" ref="imgInfo" src="./20151205231902_xe2kG.jpeg" alt="" height="200px" > </div> </template> <script> export default { name: "center", mounted() { //div 标签获取的方法 let topInfowidth = this.$refs.topInfo.style.width; let topInfoheight = this.$refs.topInfo.style.height; console.log("topInfo:"+topInfowidth+" "+topInfoheight) console.log("=================================================") //img 标签获取的方法 let imgInfowidth = this.$refs.imgInfo.width; let imgInfoheight = this.$refs.imgInfo.height; console.log("imgInfo:"+imgInfowidth+" "+imgInfoheight) let src = this.$refs.imgInfo.src; console.log("src:"+src) } //获取dom元素高度通过在标签里面定义ref属性,用this.$refs.自定义名称.offsetHight;去获取。 } </script> <style scoped> #topInfo{ overflow: hidden; } </style>
注意:需要在mounted中才能获取到