时间戳

首页 > 解决方案 > 为什么 css @media print 在某些 div 上不起作用

javascript - 为什么 css @media print 在某些 div 上不起作用

问题描述

我有这个 html 代码的问题，

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <style>
    #div1 {position:fixed;}
    #div2 {display:none;}
    #div3 {display:none;}
    
    @media print {
    #div1 {display:none;}
    #div2 {display:none;}
    #div3 {display:block;}
    }
  </style>
</head>
<body>
  <div id="div1">
    <div>Contents of #div1</div><br/>
    <button id="btn1">Go to #div2</button>
  </div>
  <div id="div2">
    <div>Contents of #div2</div><br/>
    <button id="btn2">Go to #div1</button><br/><br/>
    <button id="btn3">Print</button>
  </div>
  <div id="div3">Contents of #div3</div>
  <script>
    $(document).ready(function() {
      $("#btn1").on("click",function() {
        $("#div1").fadeOut("fast");
        $("#div2").fadeIn("fast");
      });
      $("#btn2").on("click",function() {
        $("#div2").fadeOut("fast");
        $("#div1").fadeIn("fast");
      });
      $("#btn3").on("click",function() {
        window.print();
      });
    });
  </script>
</body>
</html>

让我告诉你我希望这段代码发生什么，所以，当页面加载时，它只显示#div1，当我点击#btn1时它隐藏#div1并显示#div2，当我点击#btn2时它隐藏#div2并显示#div1，当我单击#btn3 时它会打印页面，它应该只在打印预览页面中显示#div3，但是，这里的问题是，在打印预览页面中，它显示#div2 和#div3，我不知道为什么，我只想在打印预览页面中显示#div3，任何人都可以帮助我吗？

标签： javascriptjqueryprinting

解决方案

jquery 淡入和淡出调用更改了显示属性的优先级，因此它们也出现了，在您的 css 中添加重要以覆盖。参考：CSS @media print 根本不起作用
更改您的样式，如下所示：

@media print {
#div1 {display:none !important;}
#div2 {display:none !important;}
#div3 {display:block;}
}`

推荐阅读