如何更改@media打印查询中的CSS？

Question

当 div 的内容太大时，我需要在打印之前对其进行缩放。我遵循了这里有用的建议并设置了打印样式表。当需要打印时，我发现我需要更改 @media 打印查询中的一些 css。我发现常规 CSS 选择器没有更改媒体查询中的类，而是对屏幕上的 div 进行更改，而不是在打印查询中更改。是否有一个选择器可以用来仅更改@media print css？

此处示例：点击“更改比例”按钮会立即缩放图像。我希望更改后的比例仅适用于打印输出。

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>

谢谢， 马特

Answer 1

如果我理解正确的话。您想要编辑媒体查询本身。在这种情况下，这里有一些例子。 jQuery 更改媒体查询宽度值

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

您还可以使用 window.MatchMedia() ，如下面的示例所示！ https://codepen.io/ravenous/pen/BgGKA

您只需更新现有元素（或创建一个）textContent 来包含规则，这将使其在给定上下文中有效。 使用 javascript 或 jQuery 生成 CSS 媒体查询

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

还有一个库允许专门用于此目的的 CSS 和 jQuery 的混合。 http://www.learningjquery.com/2017/03/how-to-use-media-queries-with-jquery

Answer 2

一个衬垫：

document.body.append(Object.assign(document.createElement("style"), {textContent:  "@media print {   mydiv {margin: 5em 0 0 0}   }"}))