一個文檔中的多種打印樣式可用於不同的DIV

Question

我在頁面上有一個內容滑塊，我希望允許站點訪問者僅打印他們單擊的幻燈片的內容。 我有7張幻燈片，其中兩張幻燈片內有一個“打印內容”按鈕。 每個幻燈片內容都包含在其自己的div中。

之前，我已經成功使用了特定於打印的樣式表，但是不確定如何為一個文檔設置不同的打印規則。 我可以使用某種JavaScript或jQuery嗎？ 我是兩者的新手，但願意嘗試任何嘗試。

這是關於SO的類似問題，但沒有答案。 這很接近，但是我需要維護CSS樣式。

任何幫助表示贊賞。 謝謝！

Answer 1

為您的主要元素設置CSS規則：

@media print {
  div.main-element: display: none;

然后添加另一個規則：

  div.main-element.print-me: display: block;

現在，您可以向內容的每個部分添加“打印”按鈕，並讓處理程序適當地調整類：

 $('body').on('click', '.main-element button.print', function() {
   $('.main-element').removeClass('print-me');
   $(this).closest('.main-element').addClass('print-me');
   window.print();
 });