Javascript DOM style.backgroundColor无法正常工作

Question

我的问题如下：

我有一段javascript代码，它使用document.write生成一个“新”文档，首先我编写了网页的整个标题。在那个脑袋里，我有一些CSS代码，如下所示：

<style type='text/css'> 
.black {background-color: black;} 
.white {background-color: #ffffff;} 
td {width:50px; height:50px;} 
</style>

javascript在body部分绘制一个表。编写代码基本上是两个for循环，它们绘制了一个棋盘。但这甚至不重要。每个td元素都会获得一个类black或white，通过该类可以正确着色。每个td都会获得onclick='changeBg(this)'个属性。

这就是问题变为现实的地方。我无法访问被点击的元素的背景颜色。功能如下：

function changeBg(element)
{
    alert(element.style.backgroundColor);
    element.style.backgroundColor = "red";
}

首先，我提醒当前元素的颜色。它始终警告空白通知。将颜色更改为红色并再次单击该元素后，它会警告red。 td的颜色在浏览器中显示，如果我用firebug检查它们，则background-color: black | white;

我错过了什么以及如何解决这个问题？我已经意识到如果我在使用td创建style="color: black | white"颜色时设置{{1}}颜色;它有效，但后来我不知道他们属于哪个班级。

Answer 1

您可以使用window.getComputedStyle - Docs

获取当前应用的风格

function changeBg(element) {
    alert(window.getComputedStyle(element).backgroundColor);
    element.style.backgroundColor = "red";
}