一.原生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
