通过列表元素在循环中添加 css ::before答案

【问题标题】：Add the css ::before in a loop through list elements通过列表元素在循环中添加 css ::before
【发布时间】：2021-10-09 02:15:17
【问题描述】：

我有一个无序列表，我想在 javascript 中模拟以下 css；

ul li:nth-child(6n+1) a:before { background: #81ecec; } 
ul li:nth-child(6n+2) a:before { background: #ff7675; } 
......

我正在尝试以下脚本，

const listItems = ul.getElementsByTagName('li');
    
    // Loop through the NodeList object.
    for (let i = 0; i <= listItems.length - 1; i++) {
      listItems[i].setAttribute('data-text', listItems[i].innerText);
      randomColour = setBg();
      listItems[i].innerHTML.before('background:#' + randomColour);
      listItems[i].color.innerHTML = "#" + randomColour;
    }

但我收到一个错误，即 listItems[i].innerHTML.before 不是函数。

【问题讨论】：

before() 方法与:before 伪元素无关。它在另一个元素之前插入一个真实的 DOM 元素，它不设置 CSS。
before() 方法甚至不存在于 innerHTML 中，它存在于元素上

标签： javascript css pseudo-element

【解决方案1】：

如果您正在寻找更改 CSS 伪元素，您可以尝试类似下面的 sn-p。

如果你想改变特定元素的颜色：

const li = document.getElementsByTagName('li');
----LOOP through all li-----
li[i].style.color = randomColor;

const listItems = document.getElementsByTagName('li');

// Loop through the NodeList object.
for (let i = 0; i <= listItems.length - 1; i++) {
  listItems[i].setAttribute('data-text', listItems[i].innerText);
  randomColour = "blue"
  listItems[i].style.setProperty("--pseudo-backgroundcolor", 'blue');
}

li:before {
  content: ' ';
  display: block;
  width: 50px;
  height: 50px;
  background: var(--pseudo-backgroundcolor);
}

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
</ul>

【讨论】：