Jeg har en lenke på nettsiden min for å skrive ut nettsiden. Lenken er imidlertid også synlig i selve utskriften.
Finnes det javascript eller HTML-kode som skjuler lenkeknappen når jeg klikker på utskriftsknappen?
Eksempel:
"Good Evening"
Print (click Here To Print)
Jeg ønsker å skjule denne "Print" etiketten når den skriver ut teksten "Good Evening". Etiketten "Skriv ut" skal ikke vises på selve utskriften.
I stilarket legger du til:
@media print
{
.no-print, .no-print *
{
display: none !important;
}
}
Legg deretter til class='no-print'
(eller legg til no-print-klassen i en eksisterende klasseangivelse) i HTML-teksten som du ikke vil skal vises i den trykte versjonen, for eksempel knappen din.
Beste praksis er å bruke et stilark spesielt for utskrift, og sette attributtet media
til print
.
I den viser/skjuler du elementene som du ønsker å skrive ut på papir.
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Du kan plassere lenken i en div, og deretter bruke JavaScript på ankerkoden for å skjule div-en når du klikker på den. Eksempel (ikke testet, må kanskje justeres, men du skjønner ideen):
<div id="printOption">
<a href="javascript:void();"
onclick="document.getElementById('printOption').style.visibility = 'hidden';
document.print();
return true;">
Print
</a>
</div>
Ulempen er at når man klikker på knappen, forsvinner den, og man mister det alternativet på siden (men det er alltid Ctrl+P).
En bedre løsning ville være å opprette et stilark for utskrift og i dette stilarket angi skjult status for "printOption"-ID-en (eller hva du nå kaller den). Du kan gjøre dette i head-delen av HTML-filen og angi et annet stilark med et medieattributt.