为什么 css @media print 在某些 div 上不起作用
[英]why does css @media print not work on some div
问题描述
i have problem with this html code,
我对这个 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>
let me tell you what i wish to happen with this code, so, when the page load, it just shows #div1, when i click the #btn1 it hides #div1 and shows #div2, when i click #btn2 it hides #div2 and shows #div1, when i click the #btn3 it prints the page, and it should just show #div3 in the print preview page, but, the problem here is, in the print preview page, it shows #div2 and #div3, i don't know why, i just want to show the #div3 in the print preview page, anyone can help me with this?让我告诉你我希望用这段代码发生什么，所以，当页面加载时，它只显示#div1，当我单击#btn1 时它隐藏#div1 并显示#div2，当我单击#btn2 时它隐藏#div2并显示 #div1，当我单击 #btn3 时，它会打印页面，它应该只在打印预览页面中显示 #div3，但是，这里的问题是，在打印预览页面中，它显示 #div2 和 #div3，我不知道为什么，我只想在打印预览页面中显示#div3，谁能帮我解决这个问题？
2 个解决方案
解决方案1
0 2021-01-13 07:57:18
jquery fadein and fadeout calls changed the precedence of display property so they also appeared, add important in your css to override. jquery fadein 和 fadeout 调用改变了 display 属性的优先级所以它们也出现了，在你的 css 中添加 important 来覆盖。 Ref: CSS @media print not working at all参考： CSS @media print 根本不起作用
Change your styles like below:像下面这样更改您的 styles：
@media print {
#div1 {display:none;important;}
#div2 {display:none;important;}
#div3 {display:block;}
}`
解决方案2
0 2021-01-13 08:31:13
This should also work:这也应该有效：
@media print {
#div1 {visibility:hidden; height:0; width:0}
#div2 {visibility:hidden; height:0; width:0}
#div3 {display:block;}
}
$(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(); }); });
#div1 {position:fixed;} #div2 {display:none;} #div3 {display:none;} @media print { #div1 {visibility:hidden; height:0; width:0} #div2 {visibility:hidden; height:0; width:0} #div3 {display:block;} } <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 src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.