2015-08-14 80 views
0

什么特定的CSS代码将隐藏该项目时页面加载和稍后在打印时显示它?我使用window.print函数打印html页面。打印页面时,我只有隐藏某些东西的功能。隐藏页面加载时显示何时打印

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


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

你能试着改一下,你的意思是,当实际打印,或者你想切换的东西,以显示/隐藏打印点击链接时? – Joachim

+0

当页面加载对象时会隐藏,但是当printpreview时它会显示 –

+0

等待,那么你想要打印的元素还是不打印? –

回答

3

使用CSS的@media print

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

JSFiddle Demo - View it in print preview

+0

这是隐藏对象吗?我得到这一个我想要的代码将隐藏对象时,页面加载和打印视图时,它会显示。 thx –

+0

@RonaldoCarpio的更新版本将 –

1

创建隐藏一些元素(display: none;),然后在@media print创建一个规则,显示元件(display: block;)CSS规则。

document.getElementById("print-button").addEventListener("click", function() { 
 
\t 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>