ブートストラップ印刷がCSS

Question

を上書きします： Background color not showing in print preview

私は私の実際のテキストの色を取得する方法を、まだ考え出したていません。 Bootstrapクラスで印刷に表示されたdivのみを表示したいのですが、プレビューですべての色付けが失われています。

JsFiddle

@media print { 
    .test { 
    background-color: #1a4567 !important; 
    -webkit-print-color-adjust: exact; 
    } 
} 

私はメディアプリントCSSを追加する場合、それはどのようなそれが必要ありませんが、私は、テキストの色ではないCSSで設定された色をしたいです。

Answer 1

編集コメントに基づいて：

1. ピュアJS：document.getElementById()

   あなたは2つの方法ではJavaScriptのstyle.setProperty()メソッドを使用して!importantを追加することができます。

2. jQueryハイブリッド： jQueryの.each()の中にラップします。以下

どちらの例は：お使いのプリンタの設定は、背景色とイメージを印刷することができるように

$('#filePrintPreview').html("TEST"); 
 
//way 1: pure JS exmple 
 
document.getElementById('filePrintPreview').style.setProperty('color', 'red', 'important'); 
 
//way 2: wrapped inside jQuery's each() example 
 
$('h3').each(function() { 
 
    this.style.setProperty('color', '#12FF12', 'important'); 
 
});

@media print { 
 
    .test { 
 
    background-color: #1a4567 !important; 
 
    -webkit-print-color-adjust: exact; 
 
    } 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-12 test"> 
 
    <h3>Heading</h3> 
 
    <div class="box no-border shadow" id="filePrintPreview" style="padding: 2px; word-wrap: break-word; overflow-wrap: break-word; white-space: pre-line;"> 
 
    </div> 
 
</div> 
 

 
<button class="btn btn-flat btn-primary btn-sm" style="margin-top:15px;" onclick=" window.print();">Print 
 
</button>