Javascript只影响一个元素

Question

我不明白，边框只在第一个项目上可见，为什么？

HTML

<div id="theContainer">
    <div id="item">Content 1</div>
    <div id="item">Content 2</div>
</div>​

的JavaScript

document.getElementById('item').style.borderTop = '1px solid #0ea2c7';​

JsFiddle：here

Answer 1

您可以使用document.getElementsByClassName

<强>的JavaScript

var elements = document.getElementsByClassName('item');
for (i =0; i < ele.length; i++)    {
    elements[i].style.borderTop = '1px solid #000';
}

<强> HTML

<div id="theContainer">
    <div class="item">Content 1</div>
    <div class="item">Content 2</div>
</div>​

的 CSS

#theContainer {
    height: 100px;
    width: 500px;
    position: relative;
    border: 1px solid #900;
    padding: 10px;
}
.item {
    height: 50px;
    width: 100%;
}
​

Answer 2

“ document.getElementById ”表示“按ID返回对该元素的引用”，请参阅here;而id表示身份，每个id你的dom树中只有一个元素。

如果要设置多个元素的样式，请尝试使用class。

<强> HTML

<div id="theContainer">
    <div class="item">Content 1</div>
    <div class="item">Content 2</div>
</div>

<强> CSS

.item { border-top: 1px solid #0ea2c7; }