document.getElementById（ "xxx"）。スタイル

-3

getElementById（ "xxx"）。style.color = "xxx"を使用します。これでいくつかのCSS値を変更したいと思います。しかし、問題は、これを使って同じIDをテストすると、すべてのIDとエフェクトが最初のものだけに影響するわけではありません。document.getElementById（ "xxx"）。スタイル

サンプルコードは以下の通りです：

<html> 
<body> 
<div id = "test">Test</div> 
<div id = "test">Test</div> 
<div id = "test">Test</div> 
<div id = "test">Test</div> 
<script> 
    document.getElementById("test").style.color = "blue" 
</script> 
</body> 
</html>

iは色の青にすべての4のテストを変更するために何をすべき。
AnyIdea pls。
おかげ

出典

2016-05-26 Cyber Kingston

ページにIDのインスタンスを1つだけ持つことができます。 –

私はそれが仲間を得た私はちょうど私がidとクラスの違いを知らない理由は初心者です。 –

ここでjQueryを使いたいのですが？その要素にCSSを設定している間は、純粋なjavascriptよりも簡単です –

ID は、HTML文書に一意である必要があります。 valid HTMLと書いてください。

複数の関連する要素を表現するには、はクラスを使用してください。

getElementsByClassNameまたはquerySelectorAllを使用して配列のようなオブジェクトを取得し、forループを使用して各要素に順番にアクセスできます。

var elements = document.querySelectorAll(".test"); 
 
for (var i = 0; i < elements.length; i++) { 
 
    elements[i].style.color = "blue"; 
 
}

<div class="test">Test</div> 
 
<div class="test">Test</div> 
 
<div class="test">Test</div> 
 
<div class="test">Test</div>

あるいは、子孫コンビネータとスタイルシートを作成し、含む要素にクラスを切り替えます。

document.getElementById("container").classList.add("foo");

.test { color: black; } 
 
.foo .test { color: blue; }

<div id="container"> 
 

 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 

 
</div>

jQueryのソリューションの

出典

2016-05-26 09:42:49 Quentin

-2

あなたはクラス名を使用して同じようにjQueryを使用してスタイルを追加することができます

すべての要素に対して同じ操作を実行するために同じIDを使用することはできません

$(".className").css("color","blue");

出典

2016-05-26 09:42:56

前述のように、IDは一意でなければなりません。複数のDOM要素に同じスタイルを与えたい場合は、単に 'class'を使用します。 JavaScriptを使用してスタイルを変更する

<html> 
 

 
<body> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <script> 
 
    var divList = document.getElementsByClassName("test"); 
 
    for (var i = 0; i < divList.length; i++) { 
 
     divList[i].style.color = "red"; 
 
    } 
 
    </script> 
 
</body> 
 

 
</html>

：あなたはこれを試みることができます。

出典

2016-05-26 09:48:49 ThomasS

名前 'divArray'は誤解を招きます。これは配列ではありません。 – Quentin

良い点、名前を 'divList'に変更しました – ThomasS

@ThomasS変数名を編集する場合は、コード全体に反映されていることを確認してください。私はまだ 'divList'の代わりに' divArray'を見ています:-) – KarelG

あなたのコードには二つの問題があります。

idあなたが例えばを使用する必要がありますので、一意である必要がありますが。class代わり
あなたべきループ

を選択された異なる要素間でこれは、これら二つの問題を修正するために私れる好ましい方法である：

<html> 
 
    <body> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <div class="test">Test</div> 
 
    <script> 
 
     Array.prototype.slice.call(
 
      document.getElementsByClassName("test") 
 
     ).forEach(function(element) { 
 
      element.style.color = "blue" 
 
     }); 
 
    </script> 
 
    </body> 
 
</html>

もthis Fiddle参照してください。

出典

2016-05-26 09:50:47

document.getElementById（ "xxx"）。スタイル

答えて

関連する問題