CSS类未应用于所有类似元素

Question

我有一个页面,在三个容器中有三个按钮.每个容器中的第一个按钮具有相同的id,每个容器中的第二个按钮具有相同id的按钮,并且每个容器中的第三个按钮具有相同的按钮id.我有一个Javascript接受传入信息的脚本,并相应地更改按钮中文本的颜色.不幸的是,当脚本检测到需要进行更改并尝试应用相应的CSS时,只有第一个容器中的按钮才会应用CSS.我真的不明白为什么每个具有相同元素的元素id都没有将CSS应用于它.

该Javascript行动:

document.getElementById('button_1').className = "buttonActive";

按钮元素:

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

<button id="button_1" class="button"><span id="button_text_1">Button 1</span></button>
<button id="button_2" class="button"><span id="button_text_2">Button 2</span></button>
<button id="button_3" class="button"><span id="button_text_3">Button 3</span></button>

Answer 1

发生这种情况是因为document.getElementById它返回了它使用指定的第一个元素id.

这是因为假定ID是唯一的.

请考虑使用类名,并以这种方式选择它们:

document.getElementsByClassName( 'text' )