Javascript DOM操作和设置背景样式

我有一个列表，我想使用DOM操作为列表中的每个项目提供金属/金属背景

使用bootstrap4列出

 <ul id="items" class="list-group">
   <li class="list-group-item">Item 1</li>
   <li class="list-group-item">Item 2</li>
   <li class="list-group-item">Item 3</li>
   <li class="list-group-item">Item 4</li>
 </ul>

项目1
第2项
第3项
第4项

这是我的尝试风格的背景类

var backGroundMetallic = document.getElementsByClassName("list-group");

for(var i = 0; i < backGroundMetallic.length; i++) {
  backGroundMetallic[i].style.backgroundColor = '#7fffd4';
}

var backGroundMetallic=document.getElementsByClassName（“列表组”）；
对于（var i=0；i

---

我只能使用一种CSS颜色。有没有一种方法可以引用CSS类，这样我就可以使用多种样式来设置列表背景的样式，从而使其成为金属/金属的

要向元素添加CSS类，可以使用：

var backGroundMetallic=document.getElementsByClassName（“列表组”）；
对于（var i=0；i

在一行中具有相同的功能：

document.querySelectorAll（“.list组”）
.forEach（el=>el.classList.add（“金属”））

并定义类：

.metallic{
背景色：#7fffd4；
}

将所有样式放在一个类中，然后

backGroundMetallic[i].classList.add(classname);

或者

---

您可以尝试此代码，并根据需要自定义

线性渐变

：

for(var i = 0; i < backGroundMetallic.length; i++) {
  backGroundMetallic[i].setAttribute('style','background-color : #e7eff9;background-image : linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);');
}

for（var i=0；i

Try

var backGroundMetallic=document.getElementsByClassName（“列表组项”）金属/金属对你意味着什么？展示一些你想要的例子。还有，为什么要进行DOM操作？CSS的效率更高。你是否尝试添加背景渐变，然后检查这不是“DOM操纵”。样式设计和DOM几乎毫无关系，我看不出在这种情况下如何使用JavaScript。
for(var i = 0; i < backGroundMetallic.length; i++) {
  backGroundMetallic[i].setAttribute('style','background-color : #e7eff9;background-image : linear-gradient(315deg, #e7eff9 0%, #cfd6e6 74%);');
}