如何更改@media打印查詢中的css？

當div的內容太大時，我需要在打印之前對它們進行縮放。我在這裏遵循了有用的建議並設置了打印樣式表。當需要打印時，我發現我需要更改@media打印查詢中的一些css。而不是更改媒體查詢中的類，我發現一個常規的CSS選擇器對屏幕上的div進行更改，而不是在打印查詢中進行更改。有沒有我可以用來對@media print css進行更改的選擇器？如何更改@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>

謝謝，馬特

來源

2017-09-13 Matthew David Jankowski

我不確定我是否理解。 '@media print'查詢中的選擇器已經適用於打印。似乎你已經做了你所需要的。你能澄清一下嗎？ – jfeferman

在單擊「更改比例」按鈕時的代碼段中，您可以看到屏幕上的圖像實際上會更改比例。這表明瀏覽器創建了一些其他類（可能是一個元素）並將其應用於屏幕上的div。媒體查詢中的實際類沒有任何變化。我會嘗試更新這個問題。 –

如果我理解正確。你想編輯媒體查詢本身。在這種情況下，這裏有幾個例子。 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

來源

2017-09-13 19:16:16

這些看起來很有前途。我試圖修改實現一個和目前爲止失敗的代碼片段。你可以創建一個代碼片斷展示它的工作原理嗎？謝謝， Matt –

if（CONDITIONS）{document.querySelector（'style'）。textContent + = 「@media print {div {color：red;}}」; } – 2017-09-13 19:50:49

請接受答覆！ :)這些中的任何一個都可以工作，但請記住SO是供參考的！ – 2017-09-13 19:51:26

如何更改@media打印查詢中的css？

回答

相關問題