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
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;
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
