获取应用于特定元素的所有CSS样式的列表

Question

有没有办法获取应用于特定html元素的仅用户定义的计算css样式列表.样式可以通过外部css文件或嵌入/内联样式以任何方式应用.

.p1{font-size:14px; line-height:20px;}

<style>
  .p1{ line-height:18px; color:green;}
</style>
<p class="p1" style="color:red;">Some Paragraph</p>

现在我需要的列表是应用于元素的唯一用户定义的计算样式,而不是包含由window.getComputedStyle()提供的空白/ null/default-values的整组计算样式

为了更准确地解决我的问题,我想首先介绍一个我访问网站的场景,我想使用开发人员工具栏以编程方式获取唯一的用户定义样式(或者通过在控制台上编写一些脚本) .因此,考虑到这种情况,我要求的最终产出应该是 -

{
  'color':'red',
  'line-height' : '18px',
  'font-size' : '14px'  
}

如果需要,请纠正我的疑问或解释中的任何错误.

Answer 1

您正在寻找的方法是：

window.getComputedStyle()

请参阅： Mozilla Developer Network (MDN) on Window.getComputedStyle();

http://developer.mozilla.org/en-US/docs/Web/API/Window/getComputedStyle

Window.getComputedStyle()在应用活动样式表并解析这些值可能包含的任何基本计算之后，该方法给出元素的所有 CSS 属性的值。

根据您问题中的标记和样式：

var para1 = document.getElementsByClassName('p1')[0];
var para1Styles = window.getComputedStyle(para1);

para1Color = para1Styles.getPropertyValue('color'); // red
para1FontSize = para1Styles.getPropertyValue('font-size'); // 14px
para1LineHeight = para1Styles.getPropertyValue('line-height'); // 20px

通过声明第二个（可选）参数，相同的方法还允许您从伪元素中提取样式属性值。

例如。

var para1AfterStyles = window.getComputedStyle(para1, ':after');