0

Есть вот такие дивы <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";
}

не работает.

3 ответа 3

2

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>

1
  • ЕЕЕ работает!!! 10Х!!!
    – EugeneTM
    16 окт 2018 в 13:57
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>

1

Ваш массив

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.