2017-04-17 6 views
0

ページに表示された一連のdivを印刷しようとしています。 divは親( 'printDialog')に保存され、 'prtContent'として保存され、新しいウィンドウに表示されます。JS変数に格納されているdivクラスのスタイル設定方法は?

 

     $(document).on("click","#modalBtnPrint",function() { 
      var prtContent = document.getElementById("printDialog").innerHTML; 
      var WinPrint = window.open('', '', 'right=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 
      if(WinPrint != null) { 
       WinPrint.document.write(prtContent); 
      } 
      WinPrint.focus(); 
      WinPrint.print(); 
      WinPrint.close(); 
    }); 

私の質問は以下のとおりです。

  • JSにおけるながらどのようにして、内側のdivクラスのスタイルを設定できますか? (すなわち - divのクラスの境界線を持つ= "formGroup")

編集:

T.Chmelevskijの助けを借りては、この私が動作するようになったものです:

$(document).on("click","#modalBtnPrint",function() { 
     var prtContent = document.getElementById("printDialog").innerHTML; 
     var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0'); 
     if(WinPrint != null) { 
      WinPrint.document.write(prtContent); 
      var x = WinPrint.document.querySelectorAll(".update"); 
      for (i = 0; i < x.length; i++) { 
       x[i].style.borderStyle = "solid"; 
      } 
      var x = WinPrint.document.querySelectorAll(".required"); 
      for (i = 0; i < x.length; i++) { 
       x[i].style.fontWeight = "bold"; 
      } 
     } 
     WinPrint.document.close(); 
     WinPrint.focus(); 
     WinPrint.print(); 
     WinPrint.close(); 
    }); 

みんなありがとう!

+0

なぜCSSプリントメディアを使用していませんか? – epascarello

答えて

1

WinPrint変数は、希望のウィンドウへの参照を保持します。だから何かのように:

WinPrint.window.document.querySelector('body').style.backgroundColor = "red"; 

作品。

@epascarelloが述べたように、単にスタイリング印刷出力の場合、印刷のためのcss '@media'クエリが最適な解決策です。

0

あなたは、次のコードを使用することができます変数からスタイルを追加したい場合はこのボタンをクリックの上ごCSSをapendます

var style = document.createElement('style'); 
style = **your variable which store css** 
document.head.append(style); 

。他のどのCSSもあなたのCSSを上書きすることはできません。