获取应用于元素的 CSS 类的背景颜色答案

【问题标题】：get background color of a css class applied to an element获取应用于元素的 CSS 类的背景颜色
【发布时间】：2012-12-08 10:35:23
【问题描述】：

说，我有以下 CSS 类：

.upComing{ background:#ccc; font-weight:bold; }

在我的 HTML 中，我有一个表格，其中一些行应用了该类，如下所示：

<table>
  <tr> <td></td> <td></td> </tr>
  <tr> <td></td> <td></td> </tr>
  <tr class='upComing'> <td></td> <td></td> </tr>
  <tr> <td></td> <td></td> </tr>
  <tr class='upComing'> <td></td> <td></td> </tr>
</table>

到目前为止，一切都很好，但是通过 JavaScript，我有监听 td 点击的事件，我想获取行的颜色（我知道我可以获取行的类，但在这种情况下，我需要能够从类中获取颜色）。

我需要这样做，因为表格可以导出到 excel 文件，如果行颜色在 CSS 类上，则不会应用到 excel 文件上，我想将此颜色应用于之前的每个 td将 html 发送到 excel 生成器。

PS：表格是从我们创建的 jQuery 插件动态生成的，它仍在进行中，但当我们对它有足够的信心时，我们会向公众发布它。

--更新-- 这是关于这个主题的更新，确实有一个纯 JavaScript 解决方案，我不得不深入 jQuery 的源代码来检查这个。这是解决方案：

1) 指向所需的元素

var tr = $("tr.upComing").first()[0];

2) 获取元素的 COMPUTED STYLE

var css = window.getComputedStyle( tr );

3) 获取 COMPUTED STYLE 的 PROPERTY VALUE

var color = css.getPropertyValue( "background-color" );

到目前为止，我只在 Mac 上测试了 FF、Safari、Chromium 和 Opera，如果有人可以在 IE 上尝试这个并给我们反馈，那就太好了。

【问题讨论】：

基本上是 stackoverflow.com/questions/3319/… 的副本。您可以使用相同的语法来获取值。
谢谢亚伦，我认为这不是一个真正的重复，因为这个问题是关于设置背景（内联），这个问题是关于从 css 类中将背景应用于元素。无论如何，谢谢你的呼喊。
这里有一个关于这个话题的更新，确实有一个纯javascript解决方案，我不得不潜入jquery的源代码来检查这个。这是解决方案，1）指向所需的元素 var tr = $("tr.upComing").first()[0]; 2) 获取元素的 COMPUTED STYLE var css = window.getComputedStyle(tr); 3) 获取 COMPUTED STYLE 的属性值 var color = css.getPropertyValue("background-color" );到目前为止，我只在 Mac 上测试了 FF、Safari、Chromium 和 Opera，如果有人可以在 IE 上尝试这个并给我们反馈，那将是很棒的。
How do i get a computed style?的可能重复

标签： javascript css

【解决方案1】：

您可以使用 jquery CSS 方法从元素中获取背景颜色：http://api.jquery.com/css/

var color = $(this).css("background-color");

【讨论】：

谢谢，这确实有效，但是唉，它需要使用 jquery 方法。即使它是一个 jquery 插件，它是 95% 或更多的纯 js，我希望这是一个纯 js 实现，但很奇怪 js element.style.backgroundColor 给出一个空字符串，与 element.style.background 相同......我会继续调查，也许会发布一个纯 js 解决方案。
@SamCcp 你在检查哪个元素？
我感兴趣的元素是行（tr），两个操作过程，1）用户从一列中的复选框中选择一堆行，这些行一定会发送到excel文件，我从带有element.parentNode的复选框中选择了tr（其中element是td，它给了我tr）。 2）用户单击导出按钮，整个表格进入excel，问题是从css类着色的行（tr）在excel上没有着色，但是如果我绘制每个单元格（td），它们也会在excel上着色.

【解决方案2】：

以下应该做到这一点

$('.upComing:eq(0)').css('backgroundColor')

【讨论】：

@Asimov4 - 实际上你不需要这样做，因为 css 函数无论如何都会返回选择器中第一个匹配元素的样式。但是使用 :eq(0) 会让开发人员明白这一点

【解决方案3】：

如果有帮助，我遇到了同样的问题并发现，在你的情况下使用：

a = document.getElementsByClassName('upcoming');
console.log(a.style.backgroundColor);

如果你不使用也可以：

document.addEventListener("DOMContentLoaded", function(event) {});

而是在结束body标签之前引用js文件，虽然这被认为是脏的。

【讨论】：