如何在javascript中的hr：after上设置数据内容？

Question

我知道您可以在javascript中为元素添加样式。例如

myElement.style.color = "red";

但是说我想做

hr:after {
  content: "myRuntimeValue"
}

如何用javascript实现呢？

Answer 1

您可以通过element属性间接执行此操作：

CSS

p#my-id::after {
    // set content to be the value of an attribute on the element p
    content: attr(data-value);
}

JS

const element = document.getElementById('my-id');
element.setAttribute('data-value', 'myRuntimeValue');

Answer 2

:before和:after并不是实际的DOM元素...因此，您无法在JS中使用它们进行任何操作。

但是您可以创建两个具有不同内容和样式的类，并切换该类：

JsFiddle

document.getElementById('demo').addEventListener('click', function(){
  this.classList.remove('demo');
  this.classList.add('New-demo');
});

.demo:after {
  content: " myRuntimeValue";
  color: orange;
}
.New-demo:after {
  content: " Some New Bubu!";
  color: red;
}

<p id="demo" class="demo">Click Me!</p>

使用此技巧，您不仅可以更改内容，还可以添加实际样式。