Javascript 仅在打印时显示div_Javascript_Html_Css

Javascript 仅在打印时显示div

javascript html css

Javascript 仅在打印时显示div,javascript,html,css,Javascript,Html,Css,假设我有 <div id="printOnly"> <b>Title</b> <p> Printing content </p> </div> 标题印刷内容是否可以在页面呈现时隐藏此div，并仅在打印此div时显示？为此，您需要一些css #printOnly { display : none; } @media print { #printOnl

假设我有

<div id="printOnly">
     <b>Title</b>
     <p>
        Printing content 
     </p>
</div>


标题

印刷内容

是否可以在页面呈现时隐藏此div，并仅在打印此div时显示？

为此，您需要一些css

#printOnly {
   display : none;
}

@media print {
    #printOnly {
       display : block;
    }
}

您可以使用

media=“print”

属性附加外部css样式表：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

您应该使用媒体查询

就你而言：

#printOnly {
    display: none;
}

@media print { 
    #printOnly {
        display: block;
    }
}

PS在这里查看浏览器支持

我认为最好的解决方案是在不可打印的内容周围创建一个包装：

<head>
    <style type="text/css">

    #printable { display: none; }

    @media print
    {
        #non-printable { display: none; }
        #printable { display: block; }
    }
    </style>
</head>
<body>
    <div id="non-printable">
        Your normal page contents
    </div>

    <div id="printable">
        Printer version
    </div>
</body>


#可打印{显示：无；}
@媒体印刷品
{
#不可打印{显示：无；}
#可打印{显示：块；}
}
您的正常页面内容
打印机版本

您需要媒体查询以在打印和屏幕选项之间切换

@media screen { /* for screen option*/

p {

      font-family: verdana, sans-serif;

      font-size: 17px;

  }

   }

@媒体打印{/*用于打印选项*/

 p {

     font-family: georgia, serif;
     font-size: 14px;
     color: blue;
   }

  }

根据标记，printOnly是id，您正在css中使用类选择器。可能的重复项

@media screen { #printOnly:{display:none;} }
@media print{ #printOnly:{display:block;} }

@media screen { /* for screen option*/

p {

      font-family: verdana, sans-serif;

      font-size: 17px;

  }

   }

 p {

     font-family: georgia, serif;
     font-size: 14px;
     color: blue;
   }

  }