如何在打印样式媒体时使用javascript更改样式中的css规则？

Question

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

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

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

Thank You in advance

Answer 1

Create a new CSS class that is applied to whatever div you're trying to hide for a particular printing 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:

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

Assuming you have multiple sections, you would also have to handle removing the print-hidden class when another section is triggered.

Also, display: visible; is not a valid CSS rule, you probably want display: block;

Answer 2

I would probably use window.getComputesStyle method, it will give the actual style of the element:

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

See docs for details: https://developer.mozilla.org/en/DOM:window.getComputedStyle