获取特定元素应用的所有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() 提供的包含空白/空值/默认值的所有计算样式。

为了更加精确地回答我的问题，我想举一个场景：当我第一次访问一个网站时，我想使用开发者工具栏以编程方式获取唯一的用户定义样式（或通过在控制台上编写一些脚本）。因此，考虑到这个场景，我需要的最终输出结果应该是-

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

请在需要时更正我的查询或解释中的任何错误，如果需要。

- Raj

---

然而，目前还没有跨浏览器的解决方案可以在IE上正常工作。 - seahorsepip

你可能需要一个类似于 https://github.com/reworkcss/css 的 CSS 解析器，找出元素和继承样式，将它们减少到一个列表中，然后将其与 getComputedStyle() 返回的内容进行比较。听起来很复杂，而且我相信它确实是这样的。@Himanshu 的答案可能消除了解析器的需求。 - tmslnz

Answer 1

你需要的方法是：

window.getComputedStyle()

参见: Mozilla开发者网络（MDN）有关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');

- Rounin - Standing with Ukraine

---

谢谢你的帮助！但也许我的问题对主题不太具体。所以我已经更新了查询，希望能再次听到你的观点或回复，因为上面的代码并不符合我的预期。 - Raj

Answer 2

我也一直在寻找这个问题的答案。我想出了一个解决方案，但它有些hackish。不过它确实在某种程度上解决了这个问题。

function getAppliedComputedStyles(element, pseudo) {
    var styles = window.getComputedStyle(element, pseudo)
    var inlineStyles = element.getAttribute('style')

    var retval = {}
    for (var i = 0; i < styles.length; i++) {
        var key = styles[i]
        var value = styles.getPropertyValue(key)

        element.style.setProperty(key, 'unset')

        var unsetValue = styles.getPropertyValue(key)

        if (inlineStyles)
            element.setAttribute('style', inlineStyles)
        else
            element.removeAttribute('style')

        if (unsetValue !== value)
            retval[key] = value
    }

    return retval
}

如果有帮助，请告知我。

它使用css的 unset 属性值，该属性值仅受现代浏览器支持。 https://developer.mozilla.org/en/docs/Web/CSS/unset#Browser_compatibility

- Himanshu