JS控制伪元素的方法汇总

首先我们需要了解什么是伪元素。在CSS中，伪元素是一种可以添加到选择器的关键字，使用双冒号（::）来表示，它们表示元素的某个部分，比如元素的前面（::before）或者后面（::after）等等。

而控制伪元素需要用到JavaScript，具体方法如下：

1. 获取伪元素

let element = document.querySelector('.my-element');
let style = getComputedStyle(element, '::before');

这里我们通过getComputedStyle获取元素的伪元素样式，再通过选择器::before来获取伪元素。

2. 修改伪元素样式

获取到伪元素样式之后，我们可以使用JavaScript来动态地修改它的样式：

let element = document.querySelector('.my-element');
let style = getComputedStyle(element, '::before');

element.style.setProperty('--my-color', 'red');

这里我们先获取到元素的伪元素样式，然后通过setProperty来修改一个自定义的CSS变量。

另一个例子：

let element = document.querySelector('.my-element');
let text = element.getAttribute('data-text');

element.style.setProperty('--my-text', `'${text}'`);

这里我们通过获取自定义属性data-text的值，然后将它设置为一个CSS变量。

以上就是控制伪元素的方法汇总，注意，以上方法只适用于支持CSS变量的浏览器，如果需要在旧的浏览器中使用，可以考虑使用绝对定位或JavaScript生成内容等方式来实现类似效果。