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

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?

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

这是不起作用的示例。

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 gives a huge list of unneeded stuff. I'm only looking for the styles that are being applied directly to the element.

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

我只在寻找数字（1）。