动态更改a：在CSS标记之前

Question

我在动态地更改.tracking-list li a：中的背景字段时遇到麻烦，在为每个我要遍历的ass设置CSS之前。

作为示例，我可以将下面的背景和名称更改为“红色”，但是我不确定如何在.tracking-list li a：before中更改特定字段“ background”。

关于如何动态更改此设置的任何建议？非常感谢！

style.css

.tracking-list li a:before {
    content: "";
    background: url("../images/bitmap.svg") no-repeat;
    display: inline-block;
    width: 22px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
}

JS

//Loop Through Names
var ul = document.getElementById(category);

for (var i = 0; i < data.data.length; i++) {

  let record = data.data[i];
  let tech_name = record.name;
  let logo_image = record.logo;

  var listItem = document.createElement("a");
  listItem.textContent = tech_name;
  listItem.style.background = "red";
  ul.appendChild(listItem);
}

Answer 1

您不能使用内联样式来定位伪类。

如果要更改它们，则需要：

• Modify the stylesheet
• 首先更改将规则应用于伪类的条件

后者通常是最简单的方法。

document
  .querySelector("button")
  .addEventListener("click", changeMiddleLink);
  
function changeMiddleLink() {
    document.querySelector("li:nth-child(2) a").classList.add("changed")
}

.tracking-list li a::before {
    content: "";
    background: green;
    display: inline-block;
    width: 22px;
    height: 20px;
    margin-right: 4px;
    vertical-align: middle;
}

.tracking-list li a.changed::before {
    background: red;
}

<ul class="tracking-list">
    <li>
        <a href="http://example.com/">Test</a>
    </li>
    <li>
        <a href="http://example.com/">Test</a>
    </li>
    <li>
        <a href="http://example.com/">Test</a>
    </li>
</ul>

<button type="button">Click me</button>

Answer 2

尝试listItem.classList.remove（）