5

据我了解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，所以 span 也应该有那个属性值，还是我弄错了？会不会是继承的值被忽略了getComputedStyles？如果是这样，我怎样才能获得跨度的实际可见背景颜色？谢谢你。

4

5 回答 5

4

它给你正确的结果。

跨度背景颜色为 rgba(0, 0, 0, 0)

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

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

于 2018-01-09T11:08:03.300 回答
1

编辑：更新了我的答案以使用纯 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>

于 2018-01-09T11:08:27.090 回答
0

如果你用这个

span.innerText = "span background-color is " + style.getPropertyValue("color");

然后您将获得rgb(0, 128, 0)在 span 中使用的字体颜色。你的语法给你正确的答案。

于 2018-01-09T11:49:54.063 回答
0

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

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");
<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' />

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

计算的样式是在应用了来自多个来源的“样式”之后实际用于显示元素的样式。

读到这里，听起来应该返回所有应用的“样式”，这不是发生的事情，只是我的看法。

于 2018-01-09T11:23:57.930 回答
0 

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>

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

于 2018-01-09T11:25:47.703 回答