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

Question

Is it possible to get all CSS styles that are applied to a given HTML element either in its styles property/attribute or via CSS selectors?

我正在寻找计算得到的 styles，但只有那些在元素上设置的 styles，而不是所有可能为元素设置的现有 styles。

这是一个不起作用的例子。

 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提供了大量不需要的东西。 我只是在寻找直接应用于元素的 styles。

例如，DevTools 显示在顶部...
（1）有效的styles应用于元素，下面显示...
(2) styles 继承自父代。 然后在另一个选项卡上，它显示...
(3) 所有计算的 styles。

我只寻找数字（1）。

---

为什么我需要这个。

当您在页面中使用 select 文本并复制该文本时，Chrome 会在剪贴板中放入如下所示的 HTML 代码：

<span style="color: rgb(255, 0, 0); font-family: 'Times New Roman'; font-size: medium; font-style: normal; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; display: inline !important;">
    Hello
</span>
<span style="color: blue; font-family: 'Times New Roman'; font-size: medium; font-variant: normal; font-weight: bold; letter-spacing: normal; line-height: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: 1; word-spacing: 0px; font-style: italic;">
    world
</span>

即每个元素在其style属性中都有其所有需要的 styles 内联。 这样，HTML 代码可以粘贴到其他任何地方，并且看起来相同。
Chrome 正在做的是使 HTML 代码独立于源页面中可能存在的任何样式表。

这就是我想要做的。 我想截取页面的一部分并生成等效的 HTML 代码，其所有必要的 styles 都集成在 HTML 本身中。

不过，我想避免的是，生成的 HTML 最终变得非常大。
如果我只为每个元素getComputedStyle的结果，那么最终的 HTML 将是一个巨大的字符串。

Chrome 在嵌入“重要的”styles（那些重要的）方面做得很好，而不是在每个 HTML 元素上嵌入所有可能的样式属性。

Answer 1

一般来说，这似乎是可能的，但这确实使它看起来在 Chrome 中是不可能的。

TL;DR：从 Chrome 64 开始，您需要使用本地开发服务器来测试依赖于 CSS Object Model 的功能。

下面的这段代码使用了这段代码，对 OP 的情况进行了一些小改动。

 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({ text. e.cssText.match(/\w\s{\s(?*.)}/)[1] }) } } if (elm.getAttribute('style')) { rules:push({ text. elm;getAttribute('style') }) } return rules. } var styleSheetList = document;styleSheets. let span = document;querySelector('span'); var rules = getAppliedCss(span). console.log(rules.map(r => r.text);join(''));

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

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