使用javascript，当我单击表格单元格时如何获取它的背景颜色？

Posted 2023-02-21

【中文标题】使用javascript，当我单击表格单元格时如何获取它的背景颜色？

【英文标题】：Using javascript, how do I get the background color of a table cell when I click on it?

【发布时间】：2013-06-11 14:24:04

【问题描述】：

我希望在单击表格单元格时弹出一个警报，向我显示表格单元格的背景。我似乎无法找到或弄清楚如何获取背景颜色。

我的表格单元格如下所示：

<td id="s0" onclick="selectCell(event)">0</td>

我的 selectCell 函数如下所示：

function selectCell(e)
  alert(e.target.backgroundColor);  //this gives me 'undefined'
  alert(e.target.bgcolor);          //this gives me 'undefined'
  alert(e.target.bgColor);          //nothing shows up. i don't believe this is a valid property
  //once i know i am properly grabbing the color i will do stuff with it here.

我的 CSS 如下所示：

#s0 
  border: 1px solid;
  background-color: yellow;

任何帮助将不胜感激！！

【参考方案1】：

节点的样式在styles属性中，例如：

e.target.style.backgroundColor;

但是，这仅适用于使用内联 style 属性声明的样式。如果使用样式表分配 CSS（应该如此），则需要使用：

window.getComputedStyle(e.target, null).backgroundColor;

不幸的是，Internet Explorer 没有实现getComputedStyle() 选项，而是提供currentStyle（请注意，我认为它们也不支持e.target，至少在8 之前的版本中？）。我没有用于测试的 Internet Explorer，但文档建议应该使用它：

var e = window.event ? window.event : e,
    elementNode = e.target !== null ? e.target : e.srcElement;
elementNode.currentStyle.backgroundColor;

参考资料：

currentStyle。 Element.style。 window.getComputedStyle().

【讨论】：

你的第二个很棒

【参考方案2】：

你可以通过 Jquery css() 函数轻松做到这一点

jQuery(document).ready(function()
    $(this).click(function () 
          var color = $(this).css("background-color");
          alert(color);
     );
 );

更多细节请看this例子