原生js提取CSS样式的方法

2018-03-18  本文已影响0人  你我的微笑

1. dom style 这个方法只能获取行内样式:

var  text = document.getElementById('text');

var  textColor = text.style.color;

2. currentStyle

这个方法只适用于IE浏览器,在形式上与element.style相近,区别在于currentStyle其名——目前的样式(css加载后的样式),返回的是元素当前最终的CSS属性值,包括了内部style标签里的样式和外部引入的css文件。

用法:元素.currentStyle.属性

比如我们要获取id为box的width:

var boxWidth = document.getElementById('box').currentStyle.width;

// 得到boxWidth的值为 '200px'。

3. getComputedStyle

getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration]),并且是只读的。在兼容性上,基本支持:Chrome、Firfox、IE9、Opera、Safari

用法:getComputedStyle(元素, 伪类).属性,第二个参数如果不是伪类就设置为null吧。

var el = document.getElementById("box");

var style = window.getComputedStyle(el , ":after");

上一篇下一篇

猜你喜欢

热点阅读