부트 스트랩 인쇄 CSS

Question

으로 이미 여기에 설명 오버라이드 (override) : 이 Background color not showing in print preview

내 실제 텍스트 색상을 얻는 방법을 아직 파악하지 않았습니다. 부트 스트랩 클래스 인쇄 - 표시와 함께 인쇄에만 표시 div 얻을 싶지만, 모든 색칠 미리보기에서 손실됩니다.

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

나는 그것이 무엇을해야합니까 미디어 인쇄 CSS를 추가,하지만 난 텍스트 색상을하지 CSS에서 설정 한 색상을 원하는 경우

JsFiddle

. 의견에 따라

Answer 1

편집 :

당신은 두 가지 방법으로 자바 스크립트의 style.setProperty() 방법을 사용하여 !important을 추가 할 수 있습니다

1. 순수 JS :document.getElementById().
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>