How to change style CSS rules using javascript when printing style media?

Question

How to change the CSS rule for # div1 in the style of type = "text / css" media = "print" using javascript? I want to change the display to none on the click event of the / button.

<style type="text/css" media="screen">
 #div1{
 display:visible;
}
</style

<style type="text/css" media="print">
 #div1{
 display:visible;
}
</style

thanks in advance

Answer 1

Create a new CSS class that applies to all divthat you are trying to hide for a particular print action, and add a rule to the print style sheet that hides it.

<style type="text/css" media="print">
.print-hidden {
    display:none;
}
</style>

Your trigger might look something like this:

<script>
document.getElementById('div1_trigger').onclick = function() {
    document.getElementById('div1').className = 'print-hidden';
}
</script>

Assuming you have several partitions, you will also have to handle deleting a class hidden from printing when another partition is triggered.

, display: visible; CSS, , display: block;

Answer 2

window.getComputesStyle, :

window.getComputedStyle(div1,null).getPropertyValue("display")

. : https://developer.mozilla.org/en/DOM:window.getComputedStyle