时间戳

首页 > 解决方案 > 通过列表元素在循环中添加 css ::before

javascript - 通过列表元素在循环中添加 css ::before

问题描述

我有一个无序列表，我想在 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 不是函数。

标签： javascriptcsspseudo-element

解决方案

如果您正在寻找更改 CSS 伪元素，您可以尝试类似下面的代码片段。

如果要更改特定元素的颜色：

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>

推荐阅读