Как изменить цвет div через js

276
20 февраля 2019, 12:00

Есть вот такие дивы <html>

<div class="colDiv">Color 1</div>
<div class="colDiv">Color 2</div>
<div class="colDiv">Color 3</div>

вот js

var colorArray = [
     document.getElementsByClassName('colDiv'),
     document.getElementsByClassName('colDiv'),
     document.getElementsByClassName('colDiv')
];

так получаю элементы нужно изменить цвет 2 дива

как это сделать?

Делал так:

myDiv.style.color = "blue";

пробовал так:

for (i = 0 ; i < colorArray.length; i++) {
    colorArray[i].style.backgroundColor = "#AA0000";
}

не работает.

Answer 1

getElementsByClassName возвращает массив, поэтому просто так:

var colorArray = document.getElementsByClassName('colDiv'); 
 
colorArray[1].style.backgroundColor = '#AA0000';
<div class="colDiv">Color 1</div> 
<div class="colDiv">Color 2</div> 
<div class="colDiv">Color 3</div>

Answer 2

Метод getElementsByClassName уже возвращает массив (строго говоря, HTMLCollection): нет необходимости добавлять результат в массив и тем более помещать в массив 3 раза один и тот же результат. Достаточно будет сделать так:

var colorDivs = document.getElementsByClassName("colDiv"); 
for (var i = 0; i < colorDivs.length; i++) { 
    colorDivs[i].style.backgroundColor = "#AA0000"; 
}
<div class="colDiv">Color 1</div> 
<div class="colDiv">Color 2</div> 
<div class="colDiv">Color 3</div>

Замену цвета фона только одного div-a, соответственно, можно осуществить по конкретному индексу:

var colorDivs = document.getElementsByClassName("colDiv"); 
colorDivs[1].style.backgroundColor = "#AA0000";
<div class="colDiv">Color 1</div> 
<div class="colDiv">Color 2</div> 
<div class="colDiv">Color 3</div>

Answer 3

Ваш массив

var colorArray = [
     document.getElementsByClassName('colDiv'),
     document.getElementsByClassName('colDiv'),
     document.getElementsByClassName('colDiv')
];

состоит из одинаковых коллекций, полученных выборкой по имени одного и того же класса. Соответственно, код 

colorArray[i].style.backgroundColor = "#AA0000";

обращается к несуществующему свойству style.

function changeColor() { 
  [...document.getElementsByClassName('colDiv')].forEach( 
    item => item.style.backgroundColor = "lightgreen" 
  ); 
}
<div class="colDiv">Color 1</div> 
<div class="colDiv">Color 2</div> 
<div class="colDiv">Color 3</div> 
<button onclick="changeColor()">Change Color</button>

READ ALSO
Експорт данных из mysql server to csv!
MySQL

Експорт данных из mysql server to csv!

Всем привет!

 307
REST не возвращает страницу
HTML

REST не возвращает страницу

Метод REST

 291
Как привязать к точке на изображении другое изображение
HTML

Как привязать к точке на изображении другое изображение

ищу либу или подсказки в какую сторону копать, чтобы получить на выходе практически вот это https://githubcom/timseverien/taggd, но вместо текста к точке надо...

 286
HTML: Разметка визитки
HTML

HTML: Разметка визитки

Возникла проблема в создании разметки на HTML

 481