Question

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

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

Answer 1

它给你正确的结果。

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

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

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

Answer 2

编辑：更新了我的答案，使用纯JS来查找您要查找的背景颜色：

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

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

另一个可能的选择是更新您的style范围以继承父级的背景颜色，在这种情况下，您的初始尝试将起作用：

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; background-color: inherit">Empty</span>
</p>

这是使用Jquery的旧版本：

var color = $('#getThis').closest("p").css("background-color");
$('#getThis').html('Background color is ' + color);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="background-color: orange">
  <span id="getThis" style="color: green">Empty</span>
</p>

Answer 3

我编写了这个简单的代码片段，以确保getComputedStyle仅返回元素的应用样式，而不是实际呈现的内容。

＆＃13;

let style1 = window.getComputedStyle(document.getElementById('s1'));
let style2 = window.getComputedStyle(document.getElementById('s2'));

document.getElementById('i1').value = style1.getPropertyValue("background-color");
document.getElementById('i2').value = style2.getPropertyValue("background-color");

＆＃13;

<div style='background-color: cyan'>
  <span id='s1'>Span without backgound</span>
</div>

<div style='background-color: cyan'>
  <span id='s2' style='background-color: yellow'>Span with backgound</span>
</div>

<input id='i1' type='text' />
<input id='i2' type='text' />

＆＃13;

但是，从W3Schools阅读getComputedStyle的定义，对我来说看起来很混乱：

计算出的样式是实际用于显示样式的样式元素，＆＃34;样式＆＃34;来自多个来源已被应用。

读这个，听起来像所有＆＃34;样式＆＃34;申请应该退还，这不是发生的事情，只是我的意见。

Answer 4

let span = document.getElementsByTagName("span")[0];
getBackgroundColor(span);


function getBackgroundColor(ele){
  let style = window.getComputedStyle(ele);
  if(ele){
    if(ele.style.backgroundColor)
      span.innerText = "span background-color is " + style.getPropertyValue("background-color");
    else
      getBackgroundColor(ele.parentNode);
  }else
    span.innerText = "span background is transparent";
  return;
}

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

使用递归完成...可能这就是你想要的。它将继续检查其父背景颜色，直到它找到一个，否则它将返回透明。

Answer 5

如果你使用这个

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_two);

    RadioButton rb = new RadioButton(this);
    rb.setText(getIntent().getStrignExtra("label"));

    LinearLayout main = (LinearLayout) findViewById(R.id.main_layout);
    main.addView(rb);
}

然后您将获得在span中使用的字体颜色span.innerText = "span background-color is " + style.getPropertyValue("color");。你的语法给你正确的答案。

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

5 个答案: