如何在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];
 } 
}

Answer 2

这样您可以申请

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

Answer 3

  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不正确。