javascript 获取应用于元素的 css 类的背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13980101/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
get background color of a css class applied to an element
提问by Sam Ccp
Say, I have the following CSS class:
说，我有以下 CSS 类：
.upComing{ background:#ccc; font-weight:bold; }
and in my HTML I have a table which some rows have that class applied, like so:
在我的 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>
so far, so good, but via JavaScript I have events that listen on td clicks and I want to get the color of the row (I know I can get the class of the row, but in this case I need to be able to get the color from the class).
到目前为止，很好，但是通过 JavaScript 我有监听 td 点击的事件，我想获得行的颜色（我知道我可以获得行的类，但在这种情况下我需要能够获得来自班级的颜色）。
I need to do this because the table can be exported to an excel file and the row colors don't get applied on the excel file if they're on a CSS class, I want to apply this color to each td before sending the html to the excel generator.
我需要这样做，因为可以将表格导出到 excel 文件，并且如果它们在 CSS 类上，行颜色不会应用于 excel 文件，我想在发送 html 之前将此颜色应用于每个 td到excel生成器。
PS: the table is dynamically generated from a jQuery plugin we created, it's still a work in progress, but when we feel confident enough with it we'll release it for the public.
PS：该表是由我们创建的 jQuery 插件动态生成的，它仍在进行中，但当我们对它有足够的信心时，我们会向公众发布它。
--Update-- Here's an update on this topic, there's indeed a pure javascript solution for this, I had to take a dive into jQuery's source code to check this. Here's the solution:
--更新-- 这是关于这个主题的更新，确实有一个纯 javascript 解决方案，我不得不深入研究 jQuery 的源代码来检查这个。这是解决方案：
1) point to the desired element
1) 指向所需的元素
var tr = $("tr.upComing").first()[0];
2) get the COMPUTED STYLE of the element
2) 获取元素的COMPUTED STYLE
var css = window.getComputedStyle( tr );
3) get the PROPERTY VALUE of the COMPUTED STYLE
3) 获取计算样式的属性值
var color = css.getPropertyValue( "background-color" );
As of this moment I've only tested in FF, Safari, Chromium and Opera on a Mac, if someone could try this on IE and give us feedback that'll be grand.
到目前为止，我只在 Mac 上的 FF、Safari、Chromium 和 Opera 中进行了测试，如果有人可以在 IE 上尝试这个并给我们反馈，那将是很棒的。
回答by MikeTedeschi
You can use the jquery CSS method to get the background color from an element: http://api.jquery.com/css/
您可以使用 jquery CSS 方法从元素获取背景颜色：http: //api.jquery.com/css/
var color = $(this).css("background-color");
回答by Justin Bicknell
The following should do it
以下应该这样做
$('.upComing:eq(0)').css('backgroundColor')
回答by Yranna
If it helps, I have had the same problem and found out, that in your case using:
如果有帮助，我遇到了同样的问题并发现，在您的情况下使用：
a = document.getElementsByClassName('upcoming');
console.log(a.style.backgroundColor);would work IFyou do not use:
将工作如果你不使用：
document.addEventListener("DOMContentLoaded", function(event) {});<
document.addEventListener("DOMContentLoaded", function(event) {});<
but instead refer to the js file just before the closing body tag, which is considered dirty though.
而是在结束 body 标记之前引用 js 文件，尽管这被认为是脏的。
