javascript - 使用类名更改属性

Question

我想用这个改变一个属性:

document.getElementsByClassName('a').setAttribute("color","red")

但这在 Chrome 中不起作用。控制台告诉我

setAttribute is not a function

你能告诉我使用什么 javascript 函数吗？谢谢。

Answer 1

document.getElementsByClassName 返回一个类似数组的对象而不是单个元素。您需要访问索引项。同时设置属性 style 而不是 color。如果您有多个元素，则可以使用循环遍历类数组对象并设置属性。

document.getElementsByClassName('a')[0].setAttribute("style","color:red")
------------------------------------^^^----------------------------

代码示例

document.getElementsByClassName('a')[0].setAttribute("style","color: red");

<p class='a'>Test 1</p>
<p>Test 2</p>

有很多元素

Array.prototype.forEach.call(document.getElementsByClassName('a'), 
                             item => item.setAttribute("style","color: red"));

<p class='a'>Test 1</p>
<p class='a'>Test 2</p>
<p>Test 3</p>