Comment puis-je masquer des éléments tels que les boutons d'impression lors de l'impression d'une page Web ?

Masquage d'éléments lors de l'impression d'une page Web

L'impression d'une page Web est une tâche courante, mais il peut être frustrant de voir des éléments indésirables apparaître dans l'impression. L’un de ces éléments qui pose souvent problème est le bouton d’impression lui-même. Si vous souhaitez supprimer le bouton d'impression de vos pages imprimées, voici comment y parvenir :

Requêtes multimédia CSS

Requêtes multimédia dans les feuilles de style en cascade ( CSS) vous permettent de définir des styles spécifiquement pour les impressions. Pour masquer des éléments lors de l'impression, vous pouvez utiliser la règle d'impression @media :

@media print {
    .no-print, .no-print * {
        display: none !important;
    }
}

Application de la classe

Une fois la règle CSS en place, vous devez pour ajouter une classe à l'élément que vous souhaitez masquer. Vous pouvez soit attribuer directement la classe sans impression :

<button class="no-print">Print</button>

Ou l'ajouter à une classe existante :

<button class="btn btn-primary no-print">Print</button>

Exemple

Prenons l'exemple suivant :

<p>Good Evening</p>
<button>

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

Lorsque la page est imprimée, le bouton "Imprimer" sera masqué, ne laissant que le texte « Bonsoir » sur l'impression.

Remarque :

La déclaration !important garantit que le style display: none est appliqué même si d'autres les styles tentent de le remplacer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!