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

是否可以在其

样式
属性/属性中或通过CSS选择器获取应用于给定HTML元素的所有CSS样式

我在寻找计算样式，但只寻找在元素上设置的样式，而不是可以为元素设置的所有现有样式

下面是一个不起作用的例子


let span=document.querySelector（'span'）；
让compStyles=getComputedStyle（span）；
log（'期望的结果是：“颜色：蓝色；字体样式：斜体'）；
log（'但是我们得到：'，compStyles.cssText）
div{color:red；font-weight:bold}
span{color:blue}

你好，世界
一般来说，这似乎是可能的，但在Chrome中似乎是不可能的

TL；DR：从Chrome64开始，您需要使用本地开发服务器来测试依赖于CSS对象模型的功能

下面的代码段使用的是代码，对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）；
//如果DOM元素与cssRule匹配，则返回true
var elementMatchCSSRule=函数（元素，cssRule）{
返回匹配项（元素，cssRule.selectorText）；
};
//如果在cssRule中定义了属性，则返回true
var propertyincsrule=函数（prop，cssRule）{
返回cssRule.style中的道具（&cssRule.style[prop]！==“”；
};
//在这里，我们得到一个数组中所有样式表的cssRules
var cssRules=slice（document.styleSheets）.reduce（函数（规则，样式表）{
返回规则.concat（slice（styleSheet.cssRules））；
}, []);
var getAppliedCss=函数（elm）{
//仅获取与该元素匹配的css规则
var elementRules=cssRules.filter（elementMatchCSSRule.bind（null，elm））；
var规则=[]；
if（elementRules.length）{
对于（i=0；ir.text.join（“”））
div{color:red；font-weight:bold}
span{color:blue}

你好，世界
我认为这不太可能。考虑到这一点，你为什么需要这个？可能还有另一种方法可以实现您想要的结果。注意到应用的样式可能由于特殊性或其他原因而不适用。如果可能的话，我能够在受控的环境中实现这一点（请参见下面的答案）。尽管Chrome现在似乎不允许从“CSSStyleSheet”读取“cssRules”属性。或者试试这个：@ikiK，嗯，我刚刚试过，它提供了所有样式，而不仅仅是用户应用的样式。与OP的第二个输出相同。