Maison >interface Web >tutoriel CSS >Comment puis-je imprimer une page Web tout en masquant des éléments spécifiques ?

Comment puis-je imprimer une page Web tout en masquant des éléments spécifiques ?

Mary-Kate Olsen
Mary-Kate Olsenoriginal
2024-12-22 13:16:10210parcourir

How Can I Print a Webpage While Hiding Specific Elements?

Comment imprimer une page Web sans afficher des éléments spécifiques

Lors de la préparation d'une page Web pour l'impression, il est souvent souhaitable de masquer certains éléments qui ne le sont pas destiné à apparaître sur la page imprimée. Cela inclut des éléments tels que des boutons de navigation ou des mentions de droits d'auteur.

Solution

Pour y parvenir, vous pouvez utiliser une combinaison de requêtes multimédias CSS et d'attributs de classe HTML. Voici un guide étape par étape :

1. Modification de la feuille de style

Dans la feuille de style de votre site Web, ajoutez le code CSS suivant :

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

2. Attribut de classe HTML

Dans votre code HTML, identifiez les éléments que vous souhaitez masquer lors de l'impression en leur ajoutant l'attribut de classe 'no-print'.

Exemple HTML :

<a href="#" class="no-print">Print This Page</a>
<p>Good Evening</p>

3. Résultat

Lorsque la page Web est imprimée, la requête multimédia CSS masquera tous les éléments avec la classe 'no-print', y compris le lien pour imprimer la page elle-même. Par conséquent, la sortie imprimée n'affichera que le texte « Bonsoir » sans l'étiquette « Imprimer ».

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn