Masquer les boutons lors de l'impression
J'ai une page qui contient au bas des 3 boutons avec le codage suivant:
JS:
function printpage() {
//Get the print button and put it into a variable
var printButton = document.getElementById("printpagebutton");
//Set the print button visibility to 'hidden'
printButton.style.visibility = 'hidden';
//Print the page content
window.print()
printButton.style.visibility = 'visible';
}
CSS:
#options {
align-content:center;
align-items:center;
text-align: center;
}
HTML:
<div id="options">
<input type="submit" value="post news" >
<input id="printpagebutton" type="button" value="print news" onclick="printpage()"/>
<input type="button" value="re-enter the news">
</div>
J'ai réussi à masquer le bouton d'impression lors de l'impression, mais je ne pouvais pas avec les autres.
J'ai cherché sur internet pour la solution, et la plupart des questions ont été répondues par l'ajout de la display:none;
dans le css, mais je me retrouve avec 3 boutons cachés sur l'écran.
Je veux seulement les boutons cachés lors de l'impression
Réponse peut être simple, mes connaissances en web développement est ancienne.
Vous en remercie d'avance.
- pourquoi ne pas utiliser un média d'impression fichier css?
- Prendre un coup d'oeil @ imprimer la feuille de style: smashingmagazine.com/2011/11/24/...
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser les CSS
@media
requêtes. Par exemple:CSS:
HTML:
Les styles définis dans le
@media print
bloc ne sera appliquée lors de l'impression de la page. Vous pouvez le tester en cliquant sur le bouton imprimer dans l'extrait de code; vous aurez une page blanche.Vous pouvez utiliser un css media query pour cible d'impression:
#printPageButton
.Attribuer un id pour les 2 autres boutons. Pour le POST de NEWS bouton, vous pouvez régler l'id de
postnews
et de RE-SAISIR LES NOUVELLES dereenterthenews
; Ensuite ce faireHTML