2016-11-28 5 views
-2

как изменить цвет ABCD внутри «sm» через метод узла.получить дочерний узел в javascript

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"; 
} 

Я хочу, чтобы изменить цвет класса "см" по-разному в разных DIV, как цвет "см" (firstMain) будет отличаться от класса «sm» (secondMain)

+1

Ваш HTML не содержит элементов с классом либо 'main' или 'sm-fw'. Если по 'sm-fw' вы имели в виду' sm', этот элемент не имеет дочерних элементов, а только дочерний текстовый узел, на который вы не можете установить стиль. Кроме того, пожалуйста, дайте вашему вопросу более описательное название. –

ответ

1

Есть массив цветов и выбрать элементы перебрать их и установить цвет.

** Это будет удобно, если есть много ПМ 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>

1

Попробуйте это:

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>

+0

Почему не 'querySelector ('. FirstMain .sm')'? –

0

Вы можете использовать querySelector, чтобы выбрать элемент с более конкретным селектором, чем один класс:

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

Вы можете использовать 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'; 
Смежные вопросы