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

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

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

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

内嵌样式（inline Style）：是写在 HTML 标签里面的，内嵌样式只对该标签有效。
内部样式（internal Style Sheet）：是写在 HTML 的 <style> 标签里面的，内部样式只对所在的网页有效。
外部样式表（External Style Sheet）：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以 .CSS 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。
而 element.style 只能获取被这些样式表定义了的样式，而 getComputedStyle 能获取到所有样式的值（在不同浏览器结果不一样，chrome 中是 264，在 Firefox 中是238），不管是否定义在样式表中，譬如：

 <style>
 #id{
    width : 100px;
    float:left;
 }
 </style>

  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 style="text-align:center;padding:2px" ref="abc" id="s">
            <div style="height:10px"></div>
 </div>

给div绑定ref='abc'

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

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

<mt-tabbar fixed id="mtabbar" ref="mtabbar" style="font-size:20px">
                <mt-tab-item id="xx">
                    <img slot="icon" src="">xx
                </mt-tab-item>
                <mt-tab-item id="xx">
                    <img slot="icon" src=""> xx
                </mt-tab-item>
</mt-tab-item>

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

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

推荐阅读更多精彩内容