Как мне назначить цвета в JavaScript от nth-child ()?

Question

Моя главная цель - оптимизировать скрипт sass с помощью javascript, и я планирую назначить разные цвета фона в nth-child (), используя цикл for.

Но я просмотрел много учебников, но не могу найти для этого решения.

var mainColors = ["#1D659D", "#B25353", "#A12456", "#919191", "#7a3091"];
var subColors = ["#2C8AD4", "#FF7777", "#D63475", "#707070", "#b146d1"];

function colorPicker() {
  for (var i = 0; i < mainColors.length; i++) {
    console.log(mainColors[i]);
    console.log(subColors[i]);
  }
}

.Wrapper {
  display: grid;
  grid-template-columns: 100%;
  h1 {
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 30px;
  }
  div {
    border-style: solid;
    border-width: 0px 5px 0px 0px;
    padding-bottom: 50px;
    &:nth-child(1) {
      background: #1D659D;
      border-color: #2C8AD4;
    }
    &:nth-child(2) {
      background: #B25353;
      border-color: #FF7777;
    }
    &:nth-child(3) {
      background: #A12456;
      border-color: #D63475;
    }
    &:nth-child(4) {
      background: #919191;
      border-color: #707070;
    }
    &:nth-child(5) {
      background: #7a3091;
      border-color: #b146d1;
    }
  }
}

Answer 1

Если я правильно понял, вы пытаетесь повторить цвета и установить цвета, ниже приведен код, который я добавил, это должно работать для вас.

РЕДАКТИРОВАТЬ

Спасибо за исправление моего @ try-catch-finally, querySelectorAll() вернет массив, поэтому для выбора определенных элементов мы должны использовать querySelector().

function colorPicker(){
for(var i = 0; i < mainColors.length; i++){
    document.querySelector('div:nth-child('+i+')').style.background = mainColors[i];
    document.querySelector('div:nth-child('+i+')').style.borderColor = subColors[i];
 } 
}

Answer 2

  div {
    border-style: solid;
    border-width: 0px 5px 0px 0px;
    padding-bottom: 50px;
  }
    div:nth-child(1) {
      background: #1D659D;
      border-color: #2C8AD4;
    }
    div:nth-child(2) {
      background: #B25353;
      border-color: #FF7777;
    }
    div:nth-child(3) {
      background: #A12456;
      border-color: #D63475;
    }
    div:nth-child(4) {
      background: #919191;
      border-color: #707070;
    }
    div:nth-child(5) {
      background: #7a3091;
      border-color: #b146d1;
    }

<div>111</div>
<div>222</div>
<div>333</div>
<div>444</div>
<div>555</div>

Ваш CSS неверен.

Answer 3

Таким образом, вы можете подать заявку,

var mainColors = ["#1D659D", "#B25353", "#A12456", "#919191", "#7a3091"];

var divs = document.querySelectorAll('div'), i;
for (i = 0; i < divs.length; ++i) {
   divs[i].style.background = mainColors[i];
}