vue大坑之获取mint-ui内组件样式

一.原生js获取css样式（实用，解决问题）
必须要提出的是，我们使用 element.style 也可以获取元素的CSS样式声明对象，但是其与 getComputedStyle 方法还是有一些差异的。

首先，element.style 是可读可写的，而 getComputedStyle 为只读。

其次，element.style 只可以获取 style 样式上的属性值，而无法得到所有的 CSS 样式值，什么意思呢？回顾一下 CSS 基础，CSS 样式表的表现有三种方式，

1. 内嵌样式（inline Style） ：是写在 HTML 标签里面的，内嵌样式只对该标签有效。
2. 内部样式（internal Style Sheet） ：是写在 HTML 的 var elem = document.getElementById('id'); elem.style.length // 2 window.getComputedStyle(elem, null).length // 264 console.log(window.getComputedStyle(d).getPropertyValue("width")); //100

   DOM 中 getComputedStyle 方法可用来获取元素中所有可用的css属性列表， 以数组形式返回 ，并且是只读的。window.getComputedStyle 获取的是所有的样式，如果我们只是要获取单一样式，该怎么做呢。这个时候就要介绍另一个方法 -- getPropertyValue 。如上代码

   二. 使用vuejs的ref获取绑定元素
   组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据vue的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种[DOM diff]，它可以极大提高网页的性能表现。如下代码：

   html//
   
               
   
    
   

   给div绑定ref='abc'

   export default {
       name: 'other',
       data() {
           return {
               list: []
           }
       },
       mounted() {
           console.log(this.$refs.abc.style.Height);
       },
   

   此时打印为空，并没有打印出来仍何东西，但是，如果在id为s的div标签里写上内联样式height，此时就可以获取height的值，外链及其他方式的样式获取不到
   三. 用jquery获取元素

   
                   
                       xx
                   
                   
                        xx
                   
   
   

   jquery封装其实就是运用了getComputedStyle和getPropertyValue原生方法，所以console.log($('#mtabbar').css("height"));获取到该元素高度，不过vue是数据驱动的，其目的就是减少对dom的操作，而且尽量不要再vue里使用jquery