Chrome Dev Tools 里的 Computed Style 通过 javascript 如何实现

舍瓦温
  • 103

Chrome Dev Tools 里的 Computed 面板,可以显示 Computed 的 style 列表。如图。
这个在 javascript 里可以通过 getComputedStyle(element) 来获取,但是获取的结果包括了完整的 样式列表,但我想要拿到真正被样式表影响过了属性,过滤掉那些 inherited 的属性。不知如何实现。
我的问题类似 SO 上的 这个问题

clipboard.png

回复
阅读 3.4k
1 个回答
✓ 已被采纳

我的想法就是跟一个标签相同的没有任何样式的元素去对比。
没错,就是创建一个标签相同的基础元素,对比当前元素和基础元素的样式。

function filterInheritedStyles(el){
  var tester = document.createElement(el.tagName);
  document.body.appendChild(tester);  // 基础元素必须插入到文档中才能计算出默认样式
  var defaultStyle = window.getComputedStyle(tester, null);
  var currentStyle = window.getComputedStyle(el, null);
  var ret = {};
  
  for(var k in currentStyle) {
    
      if(currentStyle.getPropertyValue(k) !== defaultStyle.getPropertyValue(k)) {
      
        ret[k] = currentStyle.getPropertyValue(k);
    }
  }

  document.body.removeChild(tester);
  return ret;
}

var styles = filterInheritedStyles(document.getElementById('a'));
console.log(styles);

我给这个 div#a 定义了以下样式:

div{
  display: inline-block;
}
#a {
  position: relative;
  margin: 30px;
  width: 200px;
  line-height: 50px;
  background: #000;
  color: #666;
}

输出结果如下:

clipboard.png

Computed 面板中显示的如下:

clipboard.png

Computed 面板中把每个样式属性拆分到了最下级,而我通过对比产生的是样式属性缩写,比如样式中的 line-height 被划分到 font 属性中。

还有一个问题就是 display 没有被输出。因为 display 定义在标签选择器中,所以测试元素插入到文档时也被赋予了同样的样式,不过可以从 document.styleSheets 中找到对应的标签选择器的样式。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏