我的目标是更改表中列的背景颜色，而无需按 ID 或名称单独寻址每个数据条目。我知道有几种方法可以做到这一点，确切地说我已经尝试了 3 种，但每种方法都遇到了问题。为了简单明了起见，在这个问题中，我问如何使用元素.样式.背景颜色 http://www.w3schools.com/jsref/prop_style_backgroundcolor.aspDOM 中的对象。这是我的 HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tester.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="tester.js"></script>
</head>
<body>
<button type="button" onClick="testerFunction()">Test</button>
<table>
<tr>
<th class="col1">Column 1 Header</th>
<th class="col2">Column 2 Header</th>
</tr>
<tr>
<td class="col1">R1 C1</td>
<td class="col2">R1 C2</td>
</tr>
<tr>
<td class="col1">R2 C1</td>
<td class="col2">R2 C2</td>
</tr>
</table>
</body>
</html>
我的 CSS 文件：
.col1{
background-color:lime;
}
我的 Javascript 文件：
function testerFunction() {
alert (document.getElementsByClassName('.col1').style.backgroundColor);
}
当我运行它时，我在 IE、Firefox 和 Chrome 中遇到大致相同的错误：
无法读取未定义的属性“backgroundColor”。
我有一种感觉，这与返回的数据类型有关DOM 对象。引用的网站说它返回一个 HTMLcollection。我发现的其他地方说它返回元素的“列表”。我尝试创建一个数组并将结果分配给数组并使用循环访问数组中的每个元素，但在同一位置出现相同的错误。可能我只是不知道如何处理“集合”。无论如何，我期待的是“lime”或十六进制或 rgb 等效项，因为这是我在 CSS 文件中定义的。我希望能够用 Javascript 来改变它。任何帮助将非常感激。谢谢！
编辑：为 Shylo Hana 的答案添加了参数，使其更加模块化
function testerFunction() {
changeColumnColor('col1','blue');
}
function changeColumnColor(column,color) {
var cols = document.getElementsByClassName(column);
for(i=0; i<cols.length; i++) {
cols[i].style.backgroundColor = color;
}
}
