How could I set different print media

Question

I'd like to ask a question.
I know I can use code like this:

 <style media='print'>    .printnotdisplay {display:none;}  </style>

To control printing, if I want to hide some components when printing.
My question is, in case for different button of print, I would like to hide different components to print, for example, in div A, I will only print components in div A, in this case, what should I do?
It seems that I should use different id for media='print', could anyone help me to provide more information?
Thank you very much
best regards

Answer 1

you can give the component you want to be visible at print an specific class like .showOnPrint

Javascript

document.getElementById("yourPrintButtonId").addEventListener("click", function() {
    document.getElementById("yourPrintComponentId").className += " showOnPrint";
}, false);

Jquery

$("#yourPrintButtonId").click(function() {
    $("#yourPrintComponentId").addClass("showOnPrint");
});

---

In the CSS hide everything not having this class with :not():

<style media="print">
    :not(.showOnPrint) {
        display: none;
    }
</style>

or

<style>
    @media print {
        :not(.showOnPrint) {
            display: none;
        }
    }
</style>