Javascript - 为元素分配新 ID [关闭]

Question

我对 Javascript 非常陌生，并且正在为它的实际工作原理而苦苦挣扎。我似乎找不到这个问题的答案。

我创建了一个表格，并为每个表格单元格指定了一个唯一 ID。我还使用 css 为每个单元格赋予了它自己的背景颜色。使用 Javascript，我怎样才能找出每个单元格的背景颜色是什么？我如何实际访问每个单元格的该属性？

谢谢 戴夫

Answer 1

这有两个部分：

1. 获取元素

2. 获取分配给它的颜色

获取元素

如果知道小区ID，可以使用document.getElementById：

var element = document.getElementById("the-id");

如果您想这样做以响应单元格上发生的事件，例如click，您可以使用事件处理程序。例如，假设表有id "my-table"：

document.getElementById("my-table").addEventListener("click", function(event) {
    var element = event.target;
    while (element && element.tagName !== "TD") {
        if (element === this) {
            // No cell was clicked
            return;
        }
        element = element.parentNode;
    }

    // ...use element here
});

这会将click 事件挂在表格上（因此您不必将它挂在每个单元格上），然后当点击到达表格时，找到点击途中经过的td到桌子上（如果有的话）。

注意：旧版本的 IE（IE8 和更早版本）没有addEventListener，它们有微软的前身attachEvent。 This answer 展示了如何在需要时解决此问题。

获取颜色

如果您直接在元素上分配颜色，通过style 属性（<td style="color: ..."...），您可以在元素上使用style 对象：

var color = element.style.color;

如果它是通过样式表分配的，那将不起作用，您需要改用getComputedStyle：

var color = getComputedStyle(element).color;

同样，旧版本的 IE 在这方面很痛苦，它们没有 getComputedStyle，但它们在元素上有 currentStyle 属性，所以你可以 polyfill (shim) getComputedStyle：

if (!window.getComputedStyle) {
    window.getComputedStyle = function(element, pseudo) {
        if (typeof pseudo !== "undefined") {
            throw "The second argument of getComputedStyle can't be polyfilled";
        }
        return element.currentStyle;
    };
}

示例

这是一个示例（仅限现代浏览器），您可以在其中单击单元格以获取其颜色：

// Hook click on the table
document.getElementById("my-table").addEventListener("click", function(event) {
  var element = event.target;
  while (element && element.tagName !== "TD") {
    if (element === this) {
      // No cell was clicked
      return;
    }
    element = element.parentNode;
  }

  // Show the color
  alert("Color: " + getComputedStyle(element).color);
}, false);

.foo {
  color: red;
}
.bar {
  color: green;
}
.biz {
  color: blue;
}
.baz {
  color: #880;
}

<table id="my-table">
  <tbody>
    <tr>
      <td class="foo">foo</td>
      <td class="bar">bar</td>
    </tr>
    <tr>
      <td class="biz">biz</td>
      <td class="baz">baz</td>
    </tr>
  </tbody>
</table>