84669 人學習
152542 人學習
20005 人學習
5487 人學習
7821 人學習
359900 人學習
3350 人學習
180660 人學習
48569 人學習
18603 人學習
40936 人學習
1549 人學習
1183 人學習
32909 人學習
Chrome Dev Tools 里的 Computed 面板,可以显示 Computed 的 style 列表。如图。这个在 javascript 里可以通过 getComputedStyle(element) 来获取,但是获取的结果包括了完整的 样式列表,但我想要拿到真正被样式表影响过了属性,过滤掉那些 inherited 的属性。不知如何实现。我的问题类似 SO 上的 这个问题
getComputedStyle(element)
人生最曼妙的风景,竟是内心的淡定与从容!
我的想法就是跟一个标签相同的没有任何样式的元素去对比。没错,就是创建一个标签相同的基础元素,对比当前元素和基础元素的样式。
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);
我给这个 p#a 定义了以下样式:
p#a
p{ display: inline-block; } #a { position: relative; margin: 30px; width: 200px; line-height: 50px; background: #000; color: #666; }
输出结果如下:
Computed 面板中显示的如下:
Computed 面板中把每个样式属性拆分到了最下级,而我通过对比产生的是样式属性缩写,比如样式中的 line-height 被划分到 font 属性中。
line-height
font
还有一个问题就是 display 没有被输出。因为 display 定义在标签选择器中,所以测试元素插入到文档时也被赋予了同样的样式,不过可以从 document.styleSheets 中找到对应的标签选择器的样式。
display
document.styleSheets
我的想法就是跟一个标签相同的没有任何样式的元素去对比。
没错,就是创建一个标签相同的基础元素,对比当前元素和基础元素的样式。
我给这个
p#a
定义了以下样式:输出结果如下:
Computed 面板中显示的如下:
Computed 面板中把每个样式属性拆分到了最下级,而我通过对比产生的是样式属性缩写,比如样式中的
line-height
被划分到font
属性中。还有一个问题就是
display
没有被输出。因为display
定义在标签选择器中,所以测试元素插入到文档时也被赋予了同样的样式,不过可以从document.styleSheets
中找到对应的标签选择器的样式。