找到你要的答案

Q:Hide when page load show when print [duplicate]

Q:当打印[复制]时显示页加载时隐藏

This question already has an answer here:

What specific css code that will hide the item when the page load and later show it when printing? I use window.print function for print the html page. I only got the function to hide something when printing page.

<style type="text/css" media="print">
#dontprint { 
   display: none; 
}
</style>


<a href="#"  id="dontprint" onclick="myFunction()" > Print </a>

这个问题在这里已经有了答案:

什么特定的CSS代码,将隐藏的物品当页面加载后显示当打印?我用window.print功能打印HTML页面。我只有在打印页面时才能隐藏一些东西。

<style type="text/css" media="print">
#dontprint { 
   display: none; 
}
</style>


<a href="#"  id="dontprint" onclick="myFunction()" > Print </a>
answer1: 回答1:

Use CSS's @media print:

#print{
display:none;
}
@media print
{    
    #print { 
      display: block !important; 
    }
}

JSFiddle Demo - View it in print preview

使用CSS的“媒体打印:

#print{
display:none;
}
@media print
{    
    #print { 
      display: block !important; 
    }
}

JSFiddle演示查看打印预览

answer2: 回答2:

Create a CSS rule that hides some element (display: none;) and then in @media print create a rule that shows element (display: block;).

document.getElementById("print-button").addEventListener("click", function() {
	window.print();
});
.print {
    display: none;
}
.no-print {
    display: block;
}
@media print {
    .print {
        display: block;
    }
    .no-print {
        display: none;
    }
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas ante nec arcu vestibulum, at mattis tortor ullamcorper. Etiam bibendum rutrum risus, sollicitudin fringilla metus vestibulum sit amet. Cras malesuada purus eget nibh finibus, sit amet feugiat elit sagittis. Vivamus vel tincidunt mauris. Praesent eu rhoncus magna. Etiam suscipit leo a porta ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum consequat, libero suscipit porttitor sagittis, orci tellus placerat ligula, ac pretium velit mauris sed massa. Duis eleifend ultrices lorem eu porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam cursus dapibus nisi, nec eleifend tellus feugiat eget. Cras augue purus, luctus quis lorem ut, vehicula molestie sem. Morbi consequat pharetra ipsum et egestas. In ac commodo justo. Aliquam dignissim faucibus odio, vitae lacinia lectus pharetra at. Vestibulum lectus ante, scelerisque vitae ex ut, ultrices volutpat felis.</p> 
<p class="print">Nullam efficitur in turpis non tincidunt. Nullam sagittis dignissim eros eget laoreet. Maecenas at odio purus. Fusce faucibus velit eget ante tempor lacinia. Duis et eleifend augue, at egestas magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac scelerisque augue. Duis vel sapien ac est tempus aliquet. Proin pharetra non arcu id faucibus. Donec commodo pellentesque nunc nec porttitor. Aenean bibendum arcu ligula, id varius mi consequat eget. Etiam fermentum aliquet vestibulum. Quisque eget neque vitae est tristique tristique at at augue. Phasellus a commodo nunc. Duis ut elit orci.</p>
<button class="no-print" id="print-button">Print</button>

创建一个CSS规则隐藏一些元素(显示:无;),然后在“媒体打印创建一个规则,显示单元(显示:块;)。

document.getElementById("print-button").addEventListener("click", function() {
	window.print();
});
.print {
    display: none;
}
.no-print {
    display: block;
}
@media print {
    .print {
        display: block;
    }
    .no-print {
        display: none;
    }
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque egestas ante nec arcu vestibulum, at mattis tortor ullamcorper. Etiam bibendum rutrum risus, sollicitudin fringilla metus vestibulum sit amet. Cras malesuada purus eget nibh finibus, sit amet feugiat elit sagittis. Vivamus vel tincidunt mauris. Praesent eu rhoncus magna. Etiam suscipit leo a porta ornare. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum consequat, libero suscipit porttitor sagittis, orci tellus placerat ligula, ac pretium velit mauris sed massa. Duis eleifend ultrices lorem eu porttitor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nam cursus dapibus nisi, nec eleifend tellus feugiat eget. Cras augue purus, luctus quis lorem ut, vehicula molestie sem. Morbi consequat pharetra ipsum et egestas. In ac commodo justo. Aliquam dignissim faucibus odio, vitae lacinia lectus pharetra at. Vestibulum lectus ante, scelerisque vitae ex ut, ultrices volutpat felis.</p> 
<p class="print">Nullam efficitur in turpis non tincidunt. Nullam sagittis dignissim eros eget laoreet. Maecenas at odio purus. Fusce faucibus velit eget ante tempor lacinia. Duis et eleifend augue, at egestas magna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam ac scelerisque augue. Duis vel sapien ac est tempus aliquet. Proin pharetra non arcu id faucibus. Donec commodo pellentesque nunc nec porttitor. Aenean bibendum arcu ligula, id varius mi consequat eget. Etiam fermentum aliquet vestibulum. Quisque eget neque vitae est tristique tristique at at augue. Phasellus a commodo nunc. Duis ut elit orci.</p>
<button class="no-print" id="print-button">Print</button>
javascript  html  css