如何确定所有直接应用于元素的CSS样式？

Question

是否有可能通过styles属性/属性或通过CSS选择器获得应用于给定HTML元素的所有CSS样式？

我正在寻找计算出的样式，但只查找元素上设置的那些样式，而不是可能为该元素设置的所有现有样式。

这是不起作用的示例。

let span = document.querySelector('span') ;
let compStyles = getComputedStyle(span) ;

console.log('The desired result is: "color: blue; font-style: italic"' ) ;
console.log('But instead we get: ', compStyles.cssText ) ;

div {color: red; font-weight: bold}
span {color: blue}

<div>
Hello <span style="font-style: italic">world</span>
</div>

getComputedStyle给出了大量不需要的东西。我只是在寻找直接应用于元素的样式。

例如，DevTools显示在顶部...（1）应用于元素的有效样式，在其下方显示...（2）从父代继承的样式。然后在另一个选项卡上，它显示...（3）所有计算出的样式。

我只在寻找数字（1）。

Answer 1

似乎有可能，但是this确实使它似乎无法在Chrome中使用。

TL; DR：从Chrome 64开始，您需要使用本地开发服务器来测试取决于CSS对象模型的功能。

var proto = Element.prototype;
var slice = Function.call.bind(Array.prototype.slice);
var matches = Function.call.bind(proto.matchesSelector ||
  proto.mozMatchesSelector || proto.webkitMatchesSelector ||
  proto.msMatchesSelector || proto.oMatchesSelector);

// Returns true if a DOM Element matches a cssRule
var elementMatchCSSRule = function(element, cssRule) {
  return matches(element, cssRule.selectorText);
};

// Returns true if a property is defined in a cssRule
var propertyInCSSRule = function(prop, cssRule) {
  return prop in cssRule.style && cssRule.style[prop] !== "";
};

// Here we get the cssRules across all the stylesheets in one array
var cssRules = slice(document.styleSheets).reduce(function(rules, styleSheet) {
  return rules.concat(slice(styleSheet.cssRules));
}, []);

var getAppliedCss = function(elm) {
  // get only the css rules that matches that element
  var elementRules = cssRules.filter(elementMatchCSSRule.bind(null, elm));
  var rules = [];
  if (elementRules.length) {
    for (i = 0; i < elementRules.length; i++) {
      var e = elementRules[i];
      rules.push({
        order: i,
        text: e.cssText
      })
    }
  }

  if (elm.getAttribute('style')) {
    rules.push({
      order: elementRules.length,
      text: elm.getAttribute('style')
    })
  }
  return rules;
}


var styleSheetList = document.styleSheets;

let span = document.querySelector('span');

var rules = getAppliedCss(span);

console.log(rules)

div {
  color: red;
  font-weight: bold
}

span {
  color: blue
}

<div>
  Hello <span style="font-style: italic">world</span>
</div>