Как выбрать фон документа кликом по панельке с цветами

Почти вечная задача, но вот опять всплыла.

Конечно, коды вот отсюда в новом пустом окне сработают, но они написаны давно и устарели. Сегодня я решил бы задачу создания такой же панельки выбора фонового цвета документа примерно так (маленькие кнопочки ниже кликабельны при условии включённого в браузере JavaScript):

Исходник (без обрамления HTML, кодировка Юникода UTF-8) приведён ниже, также он отвечает на вопросы:

• как динамически создать стиль и применить его к статическим (listStyleClass к id="colorTable") или же динамически созданным элементам HTML (cellStyleClass к созданным внутри id="colorTable" разделам);
• как получить список всех элементов, относящихся к нужному классу и назначить им обработчики событий, кстати, для этого действия возможна и такая версия кода:

  for (let el of document.getElementsByClassName('styleClass')) el.onclick = styleClass_click;
  function styleClass_click() {
   //обрабатываем клик по элементу класса styleClass
  }
  

• как чисто арифметически перебрать трёхзначные комбинации из 2 значений в каждой позиции: 000, 001, ..., 111

<div id="colorTable"></div>
<script>
 function colorTable (tableId) {
  let listDiv = document.getElementById(tableId);
  let listStyle = document.createElement('style');
  listStyle.innerHTML = '.listStyleClass { display: table; border-spacing: 5px; text-align: center; }';
  // Добавить в стиль выше margin: auto; если нужно центрировать блок
  document.head.append (listStyle);
  listDiv.className = 'listStyleClass';

  let cellStyle = document.createElement('style');
  cellStyle.innerHTML = 
   '.cellStyleClass { display: table-cell; border: 1px dotted #666; padding: 5px; cursor: pointer; }';
  document.head.append (cellStyle);

  let arr = new Array ('f','e'); //2 допустимых интенсивности компонент R, G, B для фона
  for (let i=0; i<8; i++) {
   let cellDiv = document.createElement('div');
   listDiv.appendChild (cellDiv);
   cellDiv.className = 'cellStyleClass';
   cellDiv.style.backgroundColor = '#'+arr[Math.floor(i/4)]+arr[Math.floor(i/2)%2]+arr[i%2];
    //Как перебрать трёхзначные комбинации из 2 значений в каждой позиции: 000, 001, ..., 111
  }
  Array.prototype.forEach.call (
   document.getElementsByClassName('cellStyleClass'), function (el) {
   el.onclick = function() {
    document.body.style.backgroundColor = el.style.backgroundColor;
   };
  });
 }  

 window.addEventListener('load', function (e) {
  new colorTable('colorTable');
 }); 
</script>
<noscript>
 <p style="font-size: xx-small;">No JS!</p>
</noscript>

03.06.2020, 10:01 [1223 просмотра]