如何动态设置媒体打印样式但保持媒体屏幕不变？

Question

I have a report, with a details section below. On screen, there are instructions to view the details with a button below, which toggles the list's visibility (display:).

When the report is printed , I only want the instructions visible if the list is also visible. If the list is hidden, I want the instructions also hidden (as it's on paper, it's irrelevant and makes it look like something is missing).

I can't see how to set the media-print style in function toggleListVisibility(). Something along the lines of clsInstructions.addClass(media-print-display-none) and clsInstructions.removeClass(media-print-display-none)?

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

<p>...Main report summary...</p>
<p class='clsInstructions'>See list below for details and suggested actions.</p>
<button type='button' class='noprint' onclick='toggleListVisibility()'>Show / hide list</button>
<div id='myList' style='display:none;'>...details content here...</div>

function toggleListVisibility(){
  $('#myList').toggle();
  if ($('#myList').is(":visible")) {
    //make the instructions visible to the printer...
  } else {
    //make the instructions display:none to the printer, but still visible on screen. how???...
  }
}

Answer 1

The simplest way would be:

1. Add a common class name between all the elements.
2. Toggle all of them when you wish to print.

 $(".noprint").toggle(false); //window.print();

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="noprint">A</div> <div>B</div> <div class="noprint">C</div>

The .noprint tells jQuery to select all elements that have that the class noprint . While # is normally used to identify individual elements, . is used to select all element with the class name.

So, you can hide the elements prior printing:

addEventListener('beforeprint', (event) => { 
  $(".noprint").toggle(false);
});

And, show them after printing:

addEventListener('afterprint', (event) => { 
  $(".noprint").toggle(true);
});

However, in theory, you should be able to do this with pure CSS:

 body { text-align:center; } @media print {.noprint { visibility: hidden; } }

 <h1 class="noprint">DO NOT PRINT THIS</h1> <h1 class="noprint">PRINT THIS</h1>