Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

现在我需要的列表是应用于元素的唯一用户定义的计算样式，而不是包含由 window.getComputedStyle（）<提供的空白/空值/默认值的整组计算样式/ strong>

为了更准确地说明我的问题，我想首先介绍一个我访问网站的场景，并且我想使用开发人员工具栏以编程方式获取唯一的用户定义样式（或者通过编写控制台上的一些脚本）。因此，考虑到这种情况，我需要的最终输出应该是 -

{ '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');

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

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

2 个答案: