如何onclick使用JavaScript 更改HTML元素的类以响应事件?
我有一个包含3行的表.每行都有类:.myClass.
然后我查询表行document.getElementsByClassName('myClass')并迭代元素,将每行的类更改为.otherClass.
然而,
console.log(document.getElementsByClassName('otherClass'))
Run Code Online (Sandbox Code Playgroud)
只返回一行.
而且,当我查看DOM时,只有第一.myClass行将其类更改为.otherClass; 另一个保持不动.
如何将所有.myClass行的类更改为.otherClass?
var c = document.getElementsByClassName('myTable')[0];
var x = c.getElementsByClassName('myClass');
for (var i = 0; i < x.length; i++) {
x[i].className = 'otherClass';
}
x = c.getElementsByClassName('otherClass');
console.log(x); // only one elementRun Code Online (Sandbox Code Playgroud)
<table class="myTable">
<tr class="myClass2">
<td>Content</td>
<td>Content</td>
</tr>
<tr class="myClass">
<td>Content</td>
<td>Content</td>
</tr>
<tr class="myClass">
<td>Content</td>
<td>Content</td>
</tr>
</table>Run Code Online (Sandbox Code Playgroud)