Question

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

使用Bootstrap 4列出

 <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>

这是我尝试设置班级背景的样式。

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

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

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

Answer 1

要将CSS类添加到元素，可以使用.classList.add()：

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

for(var i = 0; i < backGroundMetallic.length; i++){
    backGroundMetallic[i].classList.add("metallic");
}

同一行中的功能：

document.querySelectorAll(".list-group")
  .forEach(el => el.classList.add("metallic"))

并定义类：

.metallic{
  background-color: #7fffd4;
}

Answer 2

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

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

或做

backGroundMetallic[i].setAttribute("style", "color: red; background-color: black;");

Answer 3

您可以尝试使用此代码并根据需要自定义linear-gradient：

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

DOM操作和背景样式

3 个答案: