如何确定直接应用于元素的所有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)。

评论