Как изменить CSS внутри запроса на печать @media? ⇐ Jquery

[Anonymous]

Если содержимое div слишком велико, мне нужно масштабировать его перед печатью. Я последовал этому полезному совету и настроил таблицы стилей для печати. Когда пришло время печати, я обнаружил, что мне нужно изменить некоторые CSS-коды внутри запроса на печать @media. Вместо изменения класса в медиа-запросе я обнаружил, что обычный селектор CSS вносит изменения в div на экране, а не в запросе на печать. Есть ли селектор, который я могу использовать для внесения изменений только в CSS для печати @media?

Пример здесь: нажатие кнопки «Изменить масштаб» немедленно увеличивает изображение. Я хочу, чтобы измененный масштаб применялся только при распечатке.

Код: Выделить всё

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

Код: Выделить всё

Print Canvas
Change Scale

Спасибо,
Мэт

Подробнее здесь: https://stackoverflow.com/questions/462 ... rint-query