嘿，这个问题我之前也碰到过！浏览器为了性能优化，有时候会把DOM操作合并成批量更新，不会立刻触发重绘，所以你删除了modal之后，被覆盖的样式看起来没恢复。下面给你几个简单有效的方法，不用刷新页面就能触发浏览器重绘：

方法一：读取布局属性强制重绘 #

这是最常用的小技巧，读取像offsetHeight这类需要浏览器计算布局的属性，会强制浏览器立刻更新渲染：

function destroy(e) {
  const modal = document.getElementById('brisk-modal');
  modal.remove();
  // 读取body的offsetHeight，触发重绘
  void document.body.offsetHeight;
}

void在这里只是为了避免不必要的返回值，你也可以直接写document.body.offsetHeight;，效果完全一样。

方法二：用requestAnimationFrame触发下一帧重绘 #

这个方法更贴合浏览器的渲染周期，让移除操作和重绘在同一个渲染周期内完成：

function destroy(e) {
  const modal = document.getElementById('brisk-modal');
  modal.remove();
  // 让浏览器在下一渲染帧执行重绘
  requestAnimationFrame(() => {});
}

requestAnimationFrame的回调会在浏览器准备重绘之前执行，哪怕回调里是空的，也会触发浏览器安排一次完整的重绘。

方法三：临时修改父元素样式（备选方案） #

如果上面两种方法都没效果，可以试试给父元素加个临时样式触发重绘：

function destroy(e) {
  const modal = document.getElementById('brisk-modal');
  modal.remove();
  
  const body = document.body;
  // 添加临时类触发GPU加速重绘
  body.classList.add('temp-redraw');
  // 下一帧移除类，避免影响样式
  requestAnimationFrame(() => {
    body.classList.remove('temp-redraw');
  });
}

对应的CSS（可选）：

.temp-redraw {
  transform: translateZ(0);
}

transform: translateZ(0)会触发GPU加速，强制浏览器重新渲染元素布局。

一般来说，方法一和方法二就足够解决你的问题了，你可以先试试方法一，代码最简单直接。

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