如何获取 HTML 元素节点的实际 CSS 属性值？

Question

据我了解getComputedStyles()方法，它应该返回一个对象，该对象允许访问 HTML 元素节点的实际 CSS 属性值。

我用一个包含跨度的段落创建了这个简单的例子：

let span = document.getElementsByTagName("span")[0];
let style = window.getComputedStyle(span);
span.innerText = "span background-color is " + style.getPropertyValue("background-color");

<p style="background-color: orange">
  <span style="color: green">Empty</span>
</p>

段落的背景颜色是orange，所以跨度也应该有那个属性值，还是我弄错了？是否会忽略继承的值getComputedStyles？如果是这样，我怎样才能获得跨度的实际可见背景颜色？谢谢你。

Answer 1

它给你正确的结果。

span 背景颜色为 rgba(0, 0, 0, 0)

请注意，ainrgba是0. 根本没有不透明度，元素是完全透明的。

它不是橙色的，你只能透过它看到它后面的橙色元素。