javascript - Javascript は 1 つの要素にのみ影響します

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:こちら

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 によって要素への参照を返す" ことを意味します。ここを参照してください。id は ID を意味します。ID ごとに dom ツリーに要素を 1 つだけ持つ必要があります。

複数の要素をスタイルしたい場合は、クラスを使用してみてください。

HTML

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

CSS

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