如何使用 js 脚本隐藏 div，使其仅在特定链接标签上打印时不打印？答案

【问题标题】：How to hide div from printing only for prints over a specific link tag with js script?如何使用 js 脚本隐藏 div，使其仅在特定链接标签上打印时不打印？
【发布时间】：2023-01-24 22:28:55
【问题描述】：

该页面必须有两个打印版本。一个有价格，一个没有。我的解决方案适用于 Firefox，但不适用于基于 chrome 的浏览器。

我所做的：如果打印链接被点击，我添加 print:hidden-class 名称，然后打印，然后删除类：

<a href="javascript:if(window.print){document.getElementById('priceinfo').classList.add('print:hidden'); window.print(); document.getElementById('priceinfo').classList.remove('print:hidden');} ">print without price</a>

为什么这在 Edge 或 Chrome 中不起作用？什么会起作用？

【问题讨论】：

不要将 js 代码打到 href 中。使用 <script> 标签或单独的 javascript 文件。
使用 media="print" --> <link href="print.css" rel="stylesheet" media="print"> 或 <style media="print">

标签： javascript html printing

【解决方案1】：

感谢@Fractalism 将代码移动到脚本标签中：

<script>
  document.querySelector('#print-no-price').addEventListener('click', () => {
    if(window.print) {
      document.getElementById('priceinfo').classList.add('print:hidden'); 
      window.print(); 
      document.getElementById('priceinfo').classList.remove('print:hidden');
    }
  });
</script>

【讨论】：