如何在window.print()预览窗口打开时修改父元素属性？

由于浏览器调用window.print()后会阻塞父窗口主线程，无法在打印预览窗口打开后再修改父窗口DOM，因此可以通过**beforeprint + afterprint事件组合**实现等效效果：

• 在beforeprint触发时（打印预览打开前瞬间）给目标DIV添加类，此时DOM修改已完成，预览窗口打开后父窗口的DIV会保持带类状态；
• 在afterprint触发时（打印预览关闭后）移除类，确保仅在预览窗口打开期间类存在。

代码示例 #

// 获取目标父DIV
const targetDiv = document.querySelector('.target-parent-div');

// 打印前添加类
window.addEventListener('beforeprint', () => {
  targetDiv.classList.add('print-preview-active');
});

// 打印后移除类
window.addEventListener('afterprint', () => {
  targetDiv.classList.remove('print-preview-active');
});

方案说明 #

虽然beforeprint是在预览窗口打开前触发，但DOM修改是同步完成的，浏览器会在类添加完成后才打开预览窗口。由于打印预览会阻塞父窗口主线程，afterprint事件要等到预览窗口关闭后才会触发，因此目标DIV的新类会仅在预览窗口打开期间存在，完全匹配你的需求。该方案在Chrome和Firefox中均已测试验证可用。

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