vue获取页面dom元素样式的方法

一、$refs

给dom元素加ref=“name”

在js中

this.$refs.name.style.width

就能获取到该dom元素的width

二、document.querySelector('DOM元素').style

document.querySelector('.dingwei').style.height

三、styleSheets样式表

styleSheets能获取页面所有的dom节点的样式

document.styleSheets[3].cssRules[3].style.width

四、JavaScript原生方法

getRealStyle(obj, styleName) {
      // Js获取元素样式【支持内联】
      var realStyle = null;
      if (obj.currentStyle) {
        realStyle = obj.currentStyle[styleName];
      } else if (window.getComputedStyle) {
        realStyle = window.getComputedStyle(obj, null)[styleName];
      }
      return realStyle;
    },

页面直接调用,obj是dom节点，styleName是属性名

const divs = document.querySelector("dom节点");
this.getRealStyle(divs, "height");

五、

const divs = document.querySelector("dom节点");
let div = window.getComputedStyle(divs, null).width
console.log(div)