Question

我对Javascript非常陌生，并且正在努力实现它的实际效果。我似乎无法找到这个问题的答案。

我创建了一个表，并为每个表格单元格提供了唯一的ID。我也用css为每个单元格提供了自己的背景颜色。使用Javascript，我如何找出每个单元格的背景颜色？我如何实际访问每个单元格的属性？

由于戴夫

Answer 1

这有两个部分：

获取元素
获取分配给它的颜色

获取元素

如果您知道单元格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属性，所以你可以填充（填充）{ {1}}：

getComputedStyle

实施例

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

＆＃13;

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;
    };
}

＆＃13;

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

＆＃13;

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

＆＃13;

Javascript - 为元素分配新ID

1 个答案:

获取元素

获取颜色

实施例