javascript - 我如何从 nth-child() 在 javascript 中分配颜色？

Question

我的主要目标是使用 javascript 优化 sass 脚本，我的计划是使用 for 循环在第 nth-child() 中分配不同的背景颜色。

但我已经搜索了很多教程，但找不到任何解决方案。

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];
 } 
}