如何用js添加伪元素样式

JavaScript 不能直接操作伪元素，因为伪元素不是 DOM 树的一部分。但是，您可以使用 JavaScript 创建一个新的样式规则，并将其应用到具有伪元素的元素上。

以下是一个示例代码，用于使用 JavaScript 动态添加伪元素样式：

// 获取要添加伪元素样式的元素
const element = document.querySelector('.my-element');

// 创建一个新的样式规则
const rule = '.my-element::before { content: "Hello, world!"; color: red; }';

// 将样式规则插入到样式表中
const styleSheet = document.styleSheets[0];
styleSheet.insertRule(rule, styleSheet.cssRules.length);

// 重新计算样式，以更新伪元素样式
window.getComputedStyle(element, '::before').getPropertyValue('content');

在此示例中，我们首先获取要添加伪元素样式的元素。然后，我们创建一个新的样式规则，其中包括要应用于伪元素的样式属性。接下来，我们将样式规则插入到文档的样式表中。最后，我们使用 `getComputedStyle` 方法重新计算样式，以便浏览器可以应用新的伪元素样式。

需要注意的是，这种方法可能会产生性能问题，因为每次更新样式时都需要重新计算元素的样式。建议在必要时使用此方法，而不是在每个元素上都添加伪元素样式。