Java-скрипт Переключение цвета div - PullRequest
Новая
       12

Java-скрипт Переключение цвета div

0 голосов
/ 22 февраля 2019

Следующий скрипт создает сетку из 16 делений.Для каждого эффекта наведения мыши я хотел бы постоянно менять цвет элементов div.Может кто-нибудь дать мне указатель, как может выглядеть функция changeColor? 

<script>

let gridcontainer = document.querySelector('#gridcontainer');
gridcontainer.setAttribute('style', 'width: 20px; display: grid; grid-template-columns: auto auto auto auto;')

var index = [];
var boxes;
var i;
var change;

function createGrid(){                     
  for(i=0;i<16;i++){


                                          //console.log(index);

    boxes = document.createElement('div');
                                          console.log(boxes);
    boxes.classList.add('boxes');
    boxes.setAttribute('style','width: 30px; height:30px; background-color: 
    blue; margin: 5px;');
    boxes.setAttribute('onmouseover', changeColor());
    gridcontainer.appendChild(boxes);  

  }}

  function changeColor(){
  change = document.querySelector('.boxes');
  change.setAttribute('style','background-color: red');

  }
</script>

Спасибо всем за помощь.

Ответы [ 2 ]

0 голосов
/ 22 февраля 2019

Я использовал функцию jquery (toggleClass), чтобы изменить цвет div при наведении курсора 

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
    .b1{
        background:red;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    .b{
        background:blue;
        width: 30px;
        height: 40px;
        margin: 10px;
    }
    </style>
</head>
<body>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
    <div class="b1"></div>
<script type="text/javascript">
    $('div').hover(function () {
        // body...
         $("div").toggleClass("b");
    });
</script>
</body>
</html>
0 голосов
/ 22 февраля 2019

Вы можете использовать document.getElementsByClassName, как показано ниже: 

function changeColor() {
  change = document.getElementsByClassName('boxes');
  for (let i = 0; i < change.length; i++) {
    change[i].setAttribute('style', 'background-color: red');
  }
}

changeColor();
.boxes {
  width: 50px;
  height: 50px;
  background-color: yellow;
}
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
<div class="boxes"></div>
...