点击打印按钮后隐藏按钮：内联@media print样式不生效问题

内联style属性不支持嵌套@media print规则，这就是你写的内联CSS无效的原因。给你几个可行的解决方案：

方案一：使用内部/外部样式表定义打印媒体查询 #

既然按钮已经有noprint类，直接在页面的<style>标签或外部CSS文件里添加打印媒体查询：

@media print {
  .noprint {
    display: none !important;
  }
}

如果是通过window.open打开的新页面，要确保这个样式表被引入到新页面中。

方案二：点击时先隐藏按钮再触发打印 #

修改按钮的点击逻辑，先隐藏自身再执行打印，打印完成后可按需恢复显示：

<input type="button" id="printPageButton" onclick="
  this.style.display = 'none';
  window.print();
  // 打印后恢复按钮显示，可根据需求调整display属性值
  this.style.display = 'inline-block';
" class="printPageButton noprint" value="Print">

如果是新页面的按钮，也可以用事件监听的方式实现：

// 新页面的脚本中
document.getElementById('printPageButton').addEventListener('click', function() {
  this.style.display = 'none';
  window.print();
  // 延迟恢复，避免打印对话框未关闭时提前显示
  setTimeout(() => {
    this.style.display = 'inline-block';
  }, 100);
});

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