mint ui tab html,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 的

外部样式表(External Style Sheet) ：如果很多网页需要用到同样的样式(Styles)，将样式(Styles)写在一个以 .CSS 为后缀的 CSS 文件里，然后在每个需要用到这些样式(Styles)的网页里引用这个 CSS 文件。

而 element.style 只能获取被这些样式表定义了的样式，而 getComputedStyle 能获取到所有样式的值(在不同浏览器结果不一样，chrome 中是 264，在 Firefox 中是238)，不管是否定义在样式表中，譬如：

#id{

width : 100px;

float:left;

}

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