如何在JavaScript中定位@media打印？

我知道可以在元素上應用或刪除類，但是我怎樣才能使用JavaScript定位打印CSS的@media？例如說一個選擇元素有兩個選項A4，Legal JavaScript將在選擇任何選項時切換。如何在JavaScript中定位@media打印？

樣品CSS：

@media print { 
    .A4 { 
     .... 
    } 
    .Legal { 
     .... 
    } 
}

來源

2014-03-19 splucena

你應該澄清你的問題。您是否需要爲打印介質添加單獨的樣式？您可以爲打印介質和使用媒體查詢包含完整的不同樣式表。這不僅僅是單一課程。 – Nilesh

'window.matchMedia' - https://developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia – zamnuts

通常，當使用JavaScript來應用樣式時，開發人員創建預定義的類並在響應中動態添加classNames到用戶輸入。 –

這是我到目前爲止的解決辦法，我還是喜歡答案/ s到我的問題

<html> 
<head><title></title> 
<style> 

</style> 
<script type="text/javascript"> 
    function loadExternalCSS(filename) { 
     var fileref = document.createElement("link"); 
     fileref.rel = "stylesheet"; 
     fileref.type = "text/css"; 
     fileref.href = filename; 
     document.getElementsByTagName("head")[0].appendChild(fileref) 
    } 

    function show_applicable_print() { 
     var e = document.getElementById("print-type"); 
     var str = e.options[e.selectedIndex].text; 

     switch(str){ 
      case "A4": 
       loadExternalCSS('print1.css') 
       break; 
      case "Letter": 
       loadExternalCSS('print2.css') 
       break; 
      default: 
       alert("No paper size selected."); 
     } 
    }; 
</script> 
</head> 
<body> 
    <div id="form-main-container"> 
     <div class="type-of-paper"> 
      <table>     
      <tr><td><font>SELECT TYPE OF PAPER:</font></td></tr> 
      <tr><td><select id="print-type" onchange="show_applicable_print()"> 
       <option value="default">--SELECT TYPE OF PAPER--</option> 
       <option value="report_1">A4</option> 
       <option value="report_2">Letter</option> 
      </select></td></tr> 
      </table> 
     </div> 
    </div> 
</body> 
</html> 

print1.css code: 
@media print {#form-main-container {width: 100%; margin:0;}} 

print2.css code: 
@media print {#form-main-container {width: 50%; margin:0;}}

來源

2014-03-19 02:42:28 splucena

如何在JavaScript中定位@media打印？

回答

相關問題