Rétablir le CSS original de la page avec jQuery

Question

J'ai une page avec un bouton 'imprimante' qui utilise la méthode .css() de jQuery pour supprimer des arrière-plans et des bordures d'éléments spécifiques, et changer la taille de la police. Je peux définir une autre méthode .css() pour tout remettre à sa place, mais y a-t-il un moyen facile de tout ramener sur la page à son CSS d'origine (en plus de rafraîchir la page)?

Answer 1

Vous devez définir vos impression styles sympathiques que les règles de sélection dans votre fichier CSS principal

body.printfriendly .selector .rule 
{ 
    font-size:bigger; 
} 

Et vous pouvez ajouter et supprimer la classe printfriendly sur l'étiquette du corps pour afficher ou masquer les règles.

Vous pouvez également utiliser la section @media print pour déclarer les règles qui ne sont appliquées que lorsque l'utilisateur imprime.

@media print 
{ 
    .selector .rule 
    { 
    font-size:bigger; 
    } 
} 

Answer 2

Vous pouvez supprimer tous les styles en ligne en faisant quelque chose comme

$('*[style]').removeAttr('style'); 

Il va supprimer tous les styles définis par jQuery, mais aussi potentiellement des autres styles inline définis dans le code HTML. Pas que je le recommande cependant. Je comprends que vous ne voudrez peut-être pas utiliser une feuille de style d'impression. Certains utilisateurs souhaitent imprimer la page telle qu'ils la voient, et vous souhaiterez peut-être ajouter un aperçu avant impression.

Je recommande d'utiliser une classe .printfriendly que vous pouvez basculer vers la balise body. De cette façon, vous avez un contrôle total sur le CSS et la couche de présentation.

Answer 3

Vous pouvez utiliser .removeClass pour enlever la classe que vous avez joint

.addClass('printFriendly'); 

.removeClass('printFriendly'); 

Answer 4

Pourquoi ne pas utiliser une feuille de style d'impression qui construit au-dessus de vous l'écran stylesheet? Ce serait beaucoup plus propre:

dans votre modèle HTML:

<link href="/stylesheets/screen.css" media="screen" rel="stylesheet" type="text/css" /> 
<link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> 

dans votre print.css:

@import "screen.css"; 
// overwrite disired parts of your screen.css 

Maintenant, vous pouvez ajouter un bouton avec la commande javascript suivante:

document.print(); 

pour ouvrir l'invite d'impression par défaut du navigateur.

Answer 5

Le bouton de l'imprimante est assez old school. CSS 2 a un mécanisme media rule.

@media print { 
    /* style sheet for print goes here */ 
}