3

Имеем несколько div с двумя class...

При клике на event.target надо получить только тот class в котором есть color и присвоить его фоном на body

Я это сделал так :

document.querySelectorAll(".item").forEach(function(el) {
  el.addEventListener("click", function(event) {
    result.innerHTML = event.target.className;

    document.body.style.backgroundColor = event.target.className.slice(4)
  });
});
.item {
  width: 40px;
  height: 40px;
  border: 1px solid #000;
}

.red {
  background: red;
}

.green {
  background: green;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item yellow"></div>

<div id="result"></div>

Но этот код обозвали хардкором ...

Что такое хардкор в моём случае ?

Каким образом можно присвоить backgroundColor без хардкора ?

3
  • 1
    Я бы назвал данный код "хардкорным" из-за того, что данные цвета хранятся в CSS и их нужно оттуда получить, для меня было бы проще вынести цвета в атрибут и получать значение атрибута.
    – De.Minov
    17 янв 2021 в 6:18
  • 1
    @CbIPoK2513 а это я знаю .... я лишь выполнял задачу но js придумал я но всё остальное не моё ..изменять не мог ..только js 17 янв 2021 в 6:20
  • @CbIPoK2513 я только не знал как получить второй class - и потому у меня родился на свет этот вопрос ..я выдумал через slice - а тут ещё getComputedStyle есть ... 17 янв 2021 в 6:22

1 ответ 1

3

Думаю, что вопрос должен был звучать так: Задать цвет для <body> на основе цвета соответствующего <div>-а.

Хардкор, в данном случае, от слова hard (жёсткий), т.е. жёсткая привязка к имени цвета, ограниченная палитра, вероятность несовпадения названия класса и имени цвета.

Ну и ко всему, ещё и привязка к позиции в className - даже если не отрезать с помощью slice(), а разбивать через split(), то всё равно, нужный класс должен всегда стоять вторым в строке. Но, что если класс item добавится скриптом чуть позже? Тогда уже он будет вторым, что для нас не подходит.

document.querySelectorAll(".item").forEach(function(el) {
  el.addEventListener("click", function(event) {
    result.innerHTML = event.target.className;

    document.body.style.backgroundColor = getComputedStyle(event.target).backgroundColor;
  });
});
/* Only for demo */ body { background-color: rgba(255, 255, 255, 1); background-image: url('https://i.stack.imgur.com/m9NKc.png');

}
.item {
  width: 30px; height: 30px;
  border: 1px solid #000;
}
.red    { background: red;    }
.green  { background: green;  }
.blue   { background: blue;   }
.yellow { background: yellow; }
.голубой-полупрозрачный { background: #0ff8; }
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item yellow"></div>
<!-- Что даёт использование правильного подхода -->
<div class="голубой-полупрозрачный item"></div>

<div id="result"></div>

1

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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