Comment puis-je imprimer uniquement un élément Div spécifique à l'aide de CSS ?-js tutoriel-php.cn

Comment puis-je imprimer uniquement un élément Div spécifique à l'aide de CSS ?

Mary-Kate Olsen

Libérer： 2024-12-06 09:23:11

original

380 Les gens l'ont consulté

How Can I Print Only a Specific Div Element Using CSS?

Impression de contenu spécifique : isoler
Incorporer un contenu spécifique dans un travail d'impression tout en excluant d'autres éléments de la page peut s'avérer fastidieux. Pour résoudre ce problème, CSS propose une solution qui vous permet d'imprimer uniquement le
élément sans créer de fenêtres supplémentaires ni de boîtes de dialogue d'aperçu.

Solution :

Le code CSS suivant isole efficacement la cible

pour l'impression :

@media print {
  body {
    visibility: hidden;
  }
  #printarea {
    visibility: visible;
    position: absolute;
    left: 0;
    top: 0;
  }
}

Copier après la connexion

Explication :

Ce code utilise Print Media Query pour appliquer de manière sélective des styles au document lors de l'impression. Il masque tous les éléments de la page à l'exception des

Avantages de la solution CSS uniquement :

Pas besoin de manipulation de fenêtre ou de code supplémentaire.
Maintient la mise en page du
imprimé.
Évite les désagréments inutiles aperçus avant impression.

Approches alternatives :

Bien que CSS fournisse une solution élégante, il existe des approches alternatives :

Manipulation de l'affichage : Cela implique de définir display:none pour les éléments non imprimables. Cependant, cela peut perturber la mise en page de la page et nécessite des changements structurels.
Contrôle de la visibilité : Similaire à la solution CSS uniquement, mais sans le positionnement précis des éléments.

L'approche CSS uniquement offre une solution simple et efficace pour imprimer du contenu spécifique sans compromettre la mise en page ou l'expérience utilisateur.

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!

source：php.cn

Article précédent：Existe-t-il un événement multi-navigateur pour détecter le chargement de la page du bouton Retour ? Article suivant：Services de conseil informatique en Allemagne

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2496

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2640

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2231

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...