如何获取HTML元素节点的实际CSS属性值？ [英] How to get actual CSS property value of an HTML element node?

问题描述

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

As I understand the getComputedStyles() method, it should return an object that allows one to access the actual CSS property values of an HTML element node.

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

I created this simple example with a paragraph containing a span:

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 中忽略继承的值？如果是这样，我怎样才能获得跨度的实际可见背景颜色？谢谢。

The background color of the paragraph is orange, so the span should also have that property value, or am I mistaken? Could it be that inherited values are ignored in getComputedStyles? And if so, how can I get the actually visible background color for the span? Thank you.

推荐答案

它给你正确的结果。

span background-color是rgba（0,0,0,0）

span background-color is rgba(0, 0, 0, 0)

注意 rgba 中的是 0 。根本没有不透明度，元素是完全透明的。

Note that the a in rgba is 0. There is no opacity at all, the element is completely transparent.

它不是橙色，你可以看到它背后的橙色元素。

It isn't orange, you can just see through it to the orange element behind it.

这篇关于如何获取HTML元素节点的实际CSS属性值？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！