Вы можете использовать getElementsByClassName() для получения или выбора элементов по значению их атрибута класса в JavaScript. Этот метод возвращает массив совпадающих элементов, потому что более одного элемента на странице могут иметь один и тот же класс. Давайте посмотрим на пример:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Select Element by Class in JavaScript</title>
<style>
    .box{
        height: 50px;
        background: #ddd;
        margin: 20px;
    }
    .box.bordered{
        border: 5px solid #333;
    }
</style>
</head>
<body>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>
<div class="box bordered"></div>
<div class="box"></div>

<script>
    var boxes = document.getElementsByClassName("box");

    // Выберем первое поле и выделим его красным фоном.
    boxes[0].style.background = "red";

    /* Выберем элементы, имеющие как класс "box", так и класс "bordered" и выделим их желтым фоном */
    var borderedBoxes = document.getElementsByClassName("box bordered");
    for(var i = 0; i < borderedBoxes.length; i++){
        borderedBoxes[i].style.background = "yellow";
    }
    // Выберем последний элемент и выделим его зеленым фоном.
    boxes[boxes.length - 1].style.background = "green";
</script>
</body>
</html>

Читайте также

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.