javacriptで子ノードを取得

-2

ノードメソッドを使用して「sm」内のABCDの色を変更する方法異なった "SM"（firstMain）の色のような別のdivの中javacriptで子ノードを取得

HTML

</html> 
<body> 
    <div class="row"> 
    <div class="firstMain"><div class="sm">ABCD</div></div> 
    <div class="secondMain"><div class="sm">XYZ</div></div> 
    </div> 
</body> 
</html>

Javascriptを

var mp , sb ; 
mp = document.getElementsByClassName('main')[0]; 
sb = document.getElementsByClassName('sm')[0]; 
if (sb.firstChild === mp ){ 
sb.style.color = "blue"; 
}

私はクラスの色を変えたい "SM"クラス「sm」（secondMain）とは異なります

出典

2016-11-28 avinash majhi

はあなたのHTMLはどちらか 'main'のクラスを持つ要素がありませんまたは 'sm-fw'。 'sm-fw'によってあなたが' sm'を意味するなら、その要素は子要素を持たず、スタイルを設定できない子テキストノードだけです。また、あなたの質問にもっとわかりやすいタイトルをつけてください。 –

は、カラー配列を持ち、それらを反復し、色を設定する項目を選択します。

**多くのSMのdivの

ワーキングスニペットがある場合、これは便利になります。

var sms = document.getElementsByClassName("sm"); 
 
var colors = ["red", "blue"]; 
 
for (var i = 0; i < sms.length; i++) { 
 
    sms[i].style.color = colors[i]; 
 
}

<div class="row"> 
 
    <div class="firstMain"> 
 
    <div class="sm">ABCD</div> 
 
    </div> 
 
    <div class="secondMain"> 
 
    <div class="sm">XYZ</div> 
 
    </div> 
 
</div>

出典

2016-11-28 05:24:07

document 
 
    .querySelector('.firstMain') 
 
    .querySelector('.sm').style.color = 'red';

</html> 
 
<div class="row"> 
 
    <div class="firstMain"> 
 
    <div class="sm">ABCD</div> 
 
    </div> 
 
    <div class="secondMain"> 
 
    <div class="sm">XYZ</div> 
 
    </div> 
 

 
</div> 
 
</body> 
 

 
</html>

出典

2016-11-28 05:20:11 Khang

どうして 'querySelector（ '。firstMain .sm'）'？ –

あなたは、単一のクラスよりもより具体的なセレクタで要素を選択するquerySelectorを使用することができます：

document.querySelector('.firstMain .sm').style.color = 'blue'; 
document.querySelector('.secondMain .sm').style.color = 'red';

出典

2016-11-28 05:20:20 Paulpro

あなたはquerySelectorまたはgetElementByClassNameを使用するか、はこれを試してみてください。

mp = document.getElementsByClassName('firstMain')[0].getElementsByClassName('sm')[0]; 
sb = document.getElementsByClassName('secondMain')[0].getElementsByClassName('sm')[0]; 

sb.style.color = "blue";

または

document.querySelector('.secondMain .sm').style.color = 'blue';

出典

2016-11-28 05:23:25

javacriptで子ノードを取得

答えて

関連する問題