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

Question

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

我已經成功地使用過打印特定的樣式表，但不知道如何爲一個文檔設置不同的打印規則。有什麼可以應用的JavaScript或jQuery？我是一個新手，但我願意嘗試任何嘗試。

Here is a similar question on SO但沒有答案; this one is close但我需要維護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(); 
});