Bootstrap печати переопределяет CSS

Question

Как уже обсуждалось здесь: Background color not showing in print preview

Я не понял еще, как получить мой фактический текст расцветку. Я хочу получить div, только показанный на печать, с классом Bootstrap, видимым на принтере, отлично работает, но вся окраска теряется в предварительном просмотре.

JsFiddle

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

Если добавить материал для печати CSS он делает то, что он должен, но я хочу, чтобы текстовые цвета не цвет устанавливается CSS.

Answer 1

Отредактировано на основе комментариев:

Вы можете добавить !important используя style.setProperty() метод в JavaScript 2-мя способами:

1. Pure JS:document.getElementById().
2. jQuery hybrid: Оберните его внутри jQuery's .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>