如何在 hr:after 在 javascript 中设置数据内容？ [复制]答案

【问题标题】：How can I set data-content on hr:after in javascript? [duplicate]如何在 hr:after 在 javascript 中设置数据内容？ [复制]
【发布时间】：2019-10-15 09:53:16
【问题描述】：

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

myElement.style.color = "red";

但是说我想做相当于

hr:after {
  content: "myRuntimeValue"
}

如何在 javascript 中实现这一点？

【问题讨论】：

你不能通过 JavaScript 设置伪元素的样式
所以不可能？（至少我现在知道用谷歌搜索什么了——谢谢）

标签： javascript html css

【解决方案1】：

你可以通过元素属性间接做到这一点：

CSS

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

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

【讨论】：

【解决方案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;
}

&lt;p id="demo" class="demo"&gt;Click Me!&lt;/p&gt;

通过这个技巧，您不仅可以更改内容，还可以添加实际样式。

【讨论】：