如何更改@media打印查询中的css？ [英] How to change the css inside a @media print query?
问题描述
示例：点击更改比例按钮可立即缩放图像。我希望改变后的比例尺只适用于打印输出。
var canvas = document .getElementById（canvas1）; function draw_a（）{var context = canvas.getContext（2d）; // // LEVER // planecontext.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 （'+ 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％;背景颜色：黄色; } .myDivToPrint {background-color：yellow; top：0;左：0;保证金：0; } .no-print，.no-print * {display：none！important; } .printOnly {display：block; }} @ media print和（-ms-high-contrast：active）和（-ms-high-contrast：none）{html，body {height：100％;} background-color：pink; } .myDivToPrint {background-color：yellow; / * -moz-transform：旋转（90deg）比例（0.3）; -ms-transform：旋转（90deg）比例（0.3）; -o-transform：旋转（90deg）比例（0.3）; -webkit-transform：旋转（90deg）比例（0.3）; transform：旋转（90deg）scale（0.3）; / *标准财产* /职位：固定; top：0;左：0;保证金：0;填充：15px; font-size：14px; line-height：18px;位置：绝对;显示：flex; align-items：center; justify-content：center; / * -webkit-transform：rotate（90deg）; -moz-transform：旋转（90deg）; -o-transform：旋转（90deg）; -ms-transform：rotate（90deg）;转换：旋转（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>>更改比例< / button>< div class =myDivToPrint>< canvas height =2500pxwidth =4000pxid =canvas1>< / canvas> ;< / div>
如果我理解正确。你想编辑媒体查询本身。在这种情况下，这里有几个例子。
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
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
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
这篇关于如何更改@media打印查询中的css？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
