Edge中修改::before伪元素样式后无法按预期重绘更新

我之前也踩过Edge这个伪元素样式更新的坑，给你几个亲测有效的解决思路：

• 强制触发浏览器重绘
  Edge有时候对伪元素的样式变化检测比较迟钝，修改类名后，我们可以通过读取一个会触发重绘的属性（比如offsetHeight）来逼它更新：

  const targetDiv = document.querySelector('.your-target-div');
  targetDiv.classList.toggle('active-class');
  // 读取offsetHeight触发重绘，无副作用
  targetDiv.offsetHeight;
  

  这个方法非常轻量，不会影响页面性能，只是利用浏览器的渲染机制强制刷新样式。

• 调整类名切换的时机
  直接切换类名可能会让Edge的样式队列处理不过来，试试先移除旧类，再通过setTimeout（0毫秒延迟）添加新类，让浏览器有时间处理样式变更：

  const targetDiv = document.querySelector('.your-target-div');
  targetDiv.classList.remove('default-class');
  setTimeout(() => {
    targetDiv.classList.add('active-class');
  }, 0);
  

  0毫秒延迟会把添加类名的操作放到下一个事件循环，给浏览器足够的时间处理之前的样式移除，这样伪元素的content更容易被正确更新。

• 检查CSS选择器权重
  有时候不是Edge不更新，而是你的新样式权重不够被旧样式覆盖了。确保新样式的选择器权重不低于旧样式：

  /* 默认样式 */
  .my-div::before {
    content: "默认文本";
  }
  
  /* 点击后的样式，权重更高 */
  .my-div.active::before {
    content: "点击后文本";
  }
  

  如果权重相同，也可以调整CSS里样式的顺序，把新样式放在旧样式后面。

• 改用CSS变量控制content
  换个思路，用CSS变量来动态控制content的值，JS只需要修改变量，Edge对CSS变量的响应通常更及时：

  .my-div::before {
    content: var(--before-text, "默认文本");
  }
  

  JS修改变量的代码：

  const targetDiv = document.querySelector('.my-div');
  // 注意content的字符串需要带引号
  targetDiv.style.setProperty('--before-text', '"点击后文本"');
  

内容的提问来源于stack exchange，提问作者Daniel Morris