Question

什么特定的CSS代码会在页面加载时隐藏该项目，并在打印时显示它？我使用window.print函数打印html页面。我只有在打印页面时隐藏某些功能的功能。

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


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

Answer 1

使用CSS＆＃39; demo：

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

@media print

Answer 2

创建一个隐藏某个元素（display: none;）的CSS规则，然后在@media print中创建一个显示元素（display: block;）的规则。

＆＃13;

document.getElementById("print-button").addEventListener("click", function() {
	window.print();
});

＆＃13;

.print {
    display: none;
}
.no-print {
    display: block;
}
@media print {
    .print {
        display: block;
    }
    .no-print {
        display: none;
    }
}

＆＃13;

<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>

＆＃13;

打印时显示页面加载时隐藏

2 个答案: