Как с помощью JS изменить CSS div блокам с одинаковым названием?

Рейтинг: -1Ответов: 1Опубликовано: 12.03.2023
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>задача 3</title>
<style>body {
    background-color: bisque;
}
div {
    width: 150px;
    height: 150px;
    background-color: red;
    text-align: center;
    margin: 15px;
    display: inline-block;
}
.btn {
    display: block;
    margin: 0 auto;
} </style>
</head>
<body>
    <div class="one"><h1>1</h1></div>
    <div class="two"><h1>2</h1></div>
    <div class="three"><h1>3</h1></div>
    <div class="two"><h1>2</h1></div>
    <div class="one"><h1>1</h1></div>
    <div class="two"><h1>2</h1></div>
    <div class="three"><h1>3</h1></div>
    <div class="one"><h1>1</h1></div>
    <div class="two"><h1>2</h1></div>
    <div class="three"><h1>3</h1></div>
    <button class="btn" onclick="start()">Нажми</button>
    <script>
function start() {
   document.getElementsByClassName('two').style.border = "7px double black";
    
}
    </script>
</body>
</html>
css javascript html блок
Источник: Stack Overflow на русском

Ответы

▲ 2Принят
const btnsTwo = document.querySelectorAll('.two');
btnsTwo.forEach(item => item.classList.add('bordered'))

и стилизуете .bordered как хотите - хоть двойную линию, хоть тройную