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
中找到对应的标签选择器的样式。