一.原生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
网友评论