通过JS动态控制CSS伪元素

在做页面的时候遇到这个问题的部分的原结构是引用Ui框架vant的组件。
我是想通过触发JS事件动态修改该组件里伪元素的内容
因此收集了相关API和我最终的解决方案

1. 获取伪元素的API
   getComputedStyle(元素，“伪元素”)
   MDN解释：（MDN getComputedStyle）
   语法：let style = window.getComputedStyle(element, [pseudoElt]);
   element：用于获取计算样式的Element。
   pseudoElt 可选：指定一个要匹配的伪元素的字符串。必须对普通元素省略（或null）。
   返回的style是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。
   getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象(来自简书getComputedStyle详细介绍)
   使用方式：
   window.getComputedStyle(document.querySelector(“选择器名称”), “::before”).getPropertyValue(“content”)
   其中getPropertyValue接口返回一个 DOMString ，其中包含请求的CSS属性的值，可以取得元素最终计算出的css 样式。

2. insertRule方法（Firefox、Safari、Opera和Chrome都支持）MDN insertRule
   该接口用来给当前样式表插入新的样式规则（CSS rule），并且包含一些限制。
   注意：尽管 insertRule() 是 CSSStyleSheet 的一个方法，但它实际插入的地方是 CSSStyleSheet.cssRules 的内部 CSSRuleList。
   使用方法：
   document.styleSheets[0].insertRule(“选择器名称::before{xxx:xxx}”, 0);
   

3. addRule（IE支持）
   MDN addRule

4. dataset

<style>
选择器名称::before{
content:attr(icon)
}
</style>

通过js的dataset API 设置icon值
document.querySelector(‘选择器名称’).dataset(‘icon’,’\uF0AF’)
不过我在做项目的时候不知道为什么dataset()失效，设置不了，所以我改用setAttribute()去设置
使用方法：
document.querySelector(“选择器名称”).setAttribute(“data-icon”, “\uF0AF”);

因为做页面的时候，想通过触发事件再动态修改选择器的伪元素content的值，通过几次试验，最后采用了第4个的方法解决了问题。