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