Anwenden von CSS auf gedruckte Links

Question

Ich habe einige Links, die in schwarzem Text sind. Basierend auf dem, was der Benutzer in einem Dropdown auswählt, wende ich das unten stehende CSS an, um passende Links zu ändern. Wenn der Benutzer dann auswählt, um die Ansicht zu drucken, die er gerade sucht, werden die gleichen Links in schwarzem Text ausgedruckt. Wie kann ich das CSS auf eine gedruckte Ansicht übertragen, so dass der Benutzer die gleiche gedruckte Farbe sieht, wie sie auf dem Bildschirm angezeigt wird?

$this.find('a').css("color", "#bfbfbf"); 
$this.find('.fa-play').css("color", "#bfbfbf"); 
$this.find('.fa-check-circle').css("color", "#bfbfbf"); 

Answer 1

Der folgende Code wird die CSS irgendeines Element beeinflusst innen, während im Druckmodus zu sein:

@media print { 
    span { 
     color: black; 
    } 
} 

in dem obigen Beispiel, jede Farbe der Spanne auf Druckmodus schwarz sein wird.

Edit: 28. Oktober 2017 Basierend auf Kommentare @TamirNahum vorgeschlagen, ich habe dies herausgefunden. Unten ist die vollständige Antwort.

Die jQuery .addClass fügt die Klasse 'tailoredLink' in jedes Element ein, das der Dropdown-Auswahl entspricht.

$this.find('a').css("color", "#bfbfbf").addClass("tailoredLink"); 
$this.find('.fa-play').css("color", "#bfbfbf").addClass("tailoredLink"); 
$this.find('.fa-check-circle').css("color", "#bfbfbf").addClass("tailoredLink"); 

Dann, wenn der Benutzer die Seite drucken wählt, wird das folgende CSS zeigt die „Tailored-Links“ in grau.

@media print { 
    .tailoredLink{ 
     color: gray; 
    } 
}