Question

如前所述： Background color not showing in print preview

我还没想到，如何让我的实际文字着色。我想获得一个仅在打印时显示的div，其中Bootstrap类打印可见，工作正常，但预览中的所有着色都会丢失。

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

如果我添加媒体打印CSS它会做它应该做的事情，但我希望文本颜色不是CSS设置的颜色。

Answer 1

根据评论

编辑：

您可以使用JavaScript的!important方法以两种方式添加style.setProperty()：

纯JS： document.getElementById()。
jQuery hybrid：将其包含在jQuery＆＃39; s .each()中。

以下两个例子：

＆＃13;

$('#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');
});

＆＃13;

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

＆＃13;

<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>

＆＃13;

Bootstrap打印覆盖CSS

1 个答案: