我的目标是更改表中各列的背景色，而不必分别通过ID或Name寻址每个数据条目。我知道有几种方法可以做到这一点，而我已经尝试了3种，但每种方法都存在问题。为了简单明了，在这个问题中，我想问如何使用DOM中的element.style.backgroundColor对象成功地做到这一点。这是我的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”。
我感觉它与document.getElementsByClassName DOM对象返回的数据类型有关。被引用的网站说它返回一个HTMLcollection。我发现的其他地方说它返回元素的“列表”。我尝试制作一个数组并将结果分配给该数组，并使用循环访问该数组中的每个元素，但是在同一位置出现了相同的错误。可能是我不知道如何处理“集合”。无论如何，我都希望“ lime”或等效的hex或rgb，因为这是我在CSS文件中定义的。我希望能够使用Javascript进行更改。任何帮助将非常感激。谢谢！
编辑：向Shylo Hana的Answer中添加了参数，使其更加模块化
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;
}
}
正如Quynh Nguyen所提到的，您不需要'。'。在className中。但是-document.getElementsByClassName（'col1'）将返回对象数组。
这将返回“未定义”的值，因为数组没有类。您仍然需要遍历数组元素...
function changeBGColor() {
var cols = document.getElementsByClassName('col1');
for(i = 0; i < cols.length; i++) {
cols[i].style.backgroundColor = 'blue';
}
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句