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中才能获取到

转载于:https://www.cnblogs.com/ysx215/p/10584385.html