How to change the css inside a @media print query?

Question

When the contents of a div are too large I need to scale them before printing. I've followed the helpful advice here and set up printing stylesheets. When it comes time to print I find I need to change some of the css inside the @media print query. Instead of changing the class in the media query, I find a regular CSS selector makes the changes to the div on the screen and not in the print query. Is there a selector I can use to make the changes to the @media print css only?

Example here: Hitting the 'Change Scale' button immediately zooms the image. I want the changed scale to only apply upon printout.

 var canvas = document.getElementById("canvas1"); function draw_a() { var context = canvas.getContext("2d"); // // LEVER //plane context.fillStyle = '#aaa'; context.fillRect (25, 90, 2500, 400); } function changeScale() { var scale = .1; console.log("scale:" + scale); $('.myDivToPrint').css({ '-webkit-transform': 'scale(' + scale + ')', '-moz-transform': 'scale(' + scale + ')', '-ms-transform': 'scale(' + scale + ')', '-o-transform': 'scale(' + scale + ')', 'transform': 'scale(' + scale + ')', }); } $(document).ready(function(){ draw_a(); }); 

 div.sizePage { color: #333; } canvas { border: 1px dotted; } .printOnly { display: none; } @media print { html, body { height: 100%; background-color: yellow; } .myDivToPrint { background-color: yellow; top: 0; left: 0; margin: 0; } .no-print, .no-print * { display: none !important; } .printOnly { display: block; } } @media print and (-ms-high-contrast: active) and (-ms-high-contrast: none) { html, body { height: 100%; background-color: pink; } .myDivToPrint { background-color: yellow; /* -moz-transform: rotate(90deg) scale(0.3); -ms-transform: rotate(90deg) scale(0.3); -o-transform: rotate(90deg) scale(0.3); -webkit-transform: rotate(90deg) scale(0.3); transform: rotate(90deg) scale(0.3); /* Standard Property */ position: fixed; top: 0; left: 0; margin: 0; padding: 15px; font-size: 14px; line-height: 18px; position: absolute; display: flex; align-items: center; justify-content: center; /* -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); transform: rotate(90deg); */ } .no-print, .no-print * { display: none !important; } .printOnly { display: block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="window.print();" class="no-print">Print Canvas</button> <button onclick="changeScale();" class="no-print>">Change Scale</button> <div class="myDivToPrint"> <canvas height="2500px" width="4000px" id="canvas1"></canvas> </div> 

Thanks, Matt

Answer 1

If I understand you correctly. You would you like to edit the Media Query itself. In which case here are a few examples. jQuery change media query width value

$('body').append("<style type='text/css'>@media screen and (min-width: 500px) { /*whatever*/ }</style>");

You can also use window.MatchMedia() as show in the sample below! https://codepen.io/ravenous/pen/BgGKA

You can just update an existing element (or create one) textContent to contain the rule, which will make it effective in the given context. Generating CSS media queries with javascript or jQuery

document.querySelector('style').textContent +=
    "@media screen and (min-width:400px) { div { color: red; }}"

There is also a Library which allows the mixture of CSS and jQuery specific for this purpose. http://www.learningjquery.com/2017/03/how-to-use-media-queries-with-jquery