如何获取特定元素的用户样式

Question

有没有办法使用javascript获取这些样式

window.getComputedStyle()返回包括默认值在内的所有内容。

我需要获取我选择的元素的所有css，每个样式规则包括从其父级继承的样式。
基本上是devtools的功能。

Answer 1

function getFileStyle(ele) {
  var styleSheets = document.styleSheets
  return Array.from(styleSheets).reduce((re, sheet) => {
    if (sheet.cssRules !== null) {
      var href = sheet.href
      Array.from(sheet.cssRules).reduce((r, rule) => {
        var selector = rule.selectorText
        if (Array.from(document.querySelectorAll(selector)).includes(ele)) {
          r[selector] = r[selector]
            ? [...r[selector], { css: rule.style.cssText, href }]
            : [{ css: rule.style.cssText, href }]
        }
        return r
      }, re)
    }
    return re
  }, {})
}

console.log(getFileStyle(document.body))

结果图片：

1，但是，如果您在此页面上运行代码，您将得不到任何结果，因为所使用的样式来自不同的域。

  

在某些浏览器中，如果从其他域加载样式表，   调用cssRules导致SecurityError。

MDN

2，你的问题不明确，因为你应该给我们一个预期的输出而不是图像。图像只显示适用的风格规则，而适用的风格规则在某些情况下会改变。

例如，如果您将窗口大小调整为300 * 300，就像在移动设备上一样。您看到的样式可能会更改，因为其他样式规则可能适用。

所以，我的代码不能给你实时适用的规则。这很麻烦。

3，在大多数情况下，getComputedStyle就足够了。如果你必须处理styleSheets，我认为总会有另一种简单的方法。