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

-1

我有一个页面，它有三个容器中的三个按钮。每个容器中的第一个按钮具有相同的id，每个容器中的第二个按钮具有相同的id，并且每个容器中的第三个按钮具有相同的id。我有一个Javascript脚本，它接受传入信息并相应地更改按钮中文本的颜色。不幸的是，当脚本感觉到需要进行更改并尝试应用相应的CSS时，只有第一个容器中的按钮才会应用CSS。我真的不理解为什么每个具有相同id的元素都没有获得应用于它的CSS。未将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>

来源

2012-10-18 The Duke Of Marshall שלם

您不应该有多个具有相同ID的元素。 – Aziz

这里没有足够的上下文来说明每个按钮的用途。如果您使用事件委托：http://davidwalsh.name/event-delegate，可能会更好 – cimmanon

可以使用getElementById只选择一个DOM元素。如果你想选择多个元素，你应该使用class而不是id。

您不应该在同一文档中使用多于两个元素的相同ID。

注意：我用class替换了所有按钮的id，你也应该应用span。

修改后的代码：

JS：

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

HTML：

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

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

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

来源

2012-10-18 20:02:38 Anoop

这是发生因为document.getElementById正在返回其与指定id发现第一元件。

这是因为ID被认为是唯一的。

考虑使用类名来代替，而他们选择这种方式：

document.getElementsByClassName('text')

来源

2012-10-18 20:03:02

在DOM中，每一个元素都必须有一个唯一的ID。当您对具有相同ID的多个元素执行“document.getElementById（）”时，只返回第一个对象。

改为使用“名称”属性与document.getElementsByName方法。

示例代码：

var nameArray = document.getElementsByName("elementName"); 

for(var i=0; i<nameArray.length; i++){ 
nameArray[i].className = "myClass"; 
}

来源

2012-10-18 20:03:33

ID应该在整个页面是唯一的。

如果您希望跨页面元素使用相同的名称，请改为使用类。

来源

2012-10-18 20:03:49 devdigital

document.getElementById()

仅用于选择一个DOM元素。 ID应该是唯一的。如果你想分组元素，你应该指定类名称。

<button class="button_1"> ... 
<button class="button_2"> ... 
<button class="button_3"> ... 

<button class="button_1"> ... 
<button class="button_2"> ... 
...

您可以选择所有的第一按钮的搭配：

document.getElementsByTagName('button')

在CSS：

document.getElementByClassName('button_1')

你可以选择所有的按钮

/* first buttons */ 
.button_1 { } 

/* all buttons */ 
button {}

您代码：

来源

2012-10-18 20:09:28 clementine

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

回答

相关问题