使控件在 JavaScript 中可见，但在网页上不可见答案

【问题标题】：making the control visible in JavaScript, but invisible on web page使控件在 JavaScript 中可见，但在网页上不可见
【发布时间】：2021-09-20 22:39:44
【问题描述】：

我的网页上有两个控件。这两个控件的样式设置为不显示。我想在打印时显示这两个控件，但我不希望这些控件显示在我的网页上。每当我调用打印功能时，这两个控件都会显示在打印页面上，但每当我完成打印时它们也会显示在网页上。下面是我的网页代码：

<div id="test">
<span style="display:flex">
<img id="PARLogo" style="display:none" src="~/Images/Logo_Circle.png" alt="PAR" width="70" height="70" runat="server" >
<span id="compName" runat="server" style="font-size:25px;color:black;width:100%; display:none"><span style="color:black">&nbsp;city of test</span><br />&nbsp;Test company</span>
</span>
</div>
<input type="button" id="btnPrint" value="Print" />

下面是打印div标签的代码：

<script type="text/javascript">
$(function () {
$("#btnPrint").click(function () {
document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
var contents = $("#test").html();
var frame1 = $('<iframe />');
frame1[0].name = "frame1";
frame1.css({ "position": "absolute", "top": "-1000000px" });
$("body").append(frame1);
var frameDoc = frame1[0].contentWindow ? frame1[0].contentWindow : frame1[0].contentDocument.document ? frame1[0].contentDocument.document : frame1[0].contentDocument;
frameDoc.document.open();
//Create a new HTML document.
frameDoc.document.write('<html><head><title>DIV Contents</title>');
frameDoc.document.write('</head><body>');
//Append the external CSS file.
frameDoc.document.write('<link href="style.css" rel="stylesheet" type="text/css" />');
//Append the DIV contents.
frameDoc.document.write(contents);
frameDoc.document.write('</body></html>');
frameDoc.document.close();
setTimeout(function () {
window.frames["frame1"].focus();
window.frames["frame1"].print();
frame1.remove();
}, 500);
});
});
</script>

如您所见，我让这两个控件“PARLogo”和“compName”在 javascript 中可见，但它们在网页中是不可见的。不知道为什么，但是当页面加载时这些控件是不可见的，但是当我点击打印按钮时，这两个控件也会出现在我不想要的常规网页上。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

您是否尝试过 css 媒体查询“打印”？

@media print {
 /* print specific styles go here */
}

或重置这些：

document.getElementById('<%=PARLogo.ClientID %>').style.display = "block";
document.getElementById('<%=compName.ClientID %>').style.display = "block";
.....
frame1.remove();
document.getElementById('<%=PARLogo.ClientID %>').style.display = "none";
document.getElementById('<%=compName.ClientID %>').style.display = "none";

【讨论】：