美文网首页
原生js提取CSS样式的方法

原生js提取CSS样式的方法

作者: 你我的微笑 | 来源:发表于2018-03-18 15:51 被阅读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");

    相关文章

      网友评论

          本文标题:原生js提取CSS样式的方法

          本文链接:https://www.haomeiwen.com/subject/zbieqftx.html