javascript - 如何更改@media 打印查询中的 css？

Question

当 div 的内容太大时，我需要在打印前缩放它们。我遵循了此处的有用建议并设置了打印样式表。当需要打印时，我发现我需要更改@media 打印查询中的一些 css。我没有在媒体查询中更改类，而是发现常规 CSS 选择器在屏幕上而不是在打印查询中对 div 进行了更改。有没有我可以用来仅更改@media 打印 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 change media query width value

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

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

您可以只更新现有元素(或创建一个)textContent 以包含该规则，这将使其在给定的上下文中有效。 Generating CSS media queries with javascript or jQuery

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