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

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

Похожие посты

How to increase and decrease image size using JavaScript

Answer: Use the JavaScript width и height property You can use either width or height JavaScript property to proportionally increase и decrease the dimension of an image like zoom-in и zoom-out feature. Let’s take a look at the following example to understи how it basically works: Пример <!DOCTYPE html> <html lang=»en»> <head> <meta charset=»utf-8″> <title>JavaScript…

Как сделать паузу при выполнении скрипта в JavaScript

Вы можете просто использовать метод setTimeout(), чтобы сделать паузу, прежде чем продолжить выполнение кода в JavaScript. Время задержки выполнения скрипта указывается в миллисекундах (тысячных долях секунды). Давайте посмотрим следующий пример, чтобы понять, как это работает: Как вы заметили в предыдущем примере, JS-код после метода setTimeout() продолжает выполнение. Однако, если вам нужен настоящий «сон», когда все…

Как перебрать массив в JavaScript

Самый простой способ перебрать массив в JavaScript — использовать цикл for. В следующем примере показано, как вывести все значения массива в JavaScript по очереди. В качестве альтернативы вы можете использовать недавно представленный цикл for-of в ES6 для итерации по массиву, например: См. Руководство по ES6-функциям JavaScript, чтобы узнать о новых функциях, представленных в ES6.

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

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

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

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