javascript - 打印预览中未显示 CSS 样式

Question

我正在尝试创建一个函数来更改我的字体颜色，但我需要打印它，目前一切正常，但我在打印时遇到 CSS 问题，这是我的代码

$('#draw').on('click', 'p', function () {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

$('#click').click(function () {
  var html = "";
  html += '<p>I want to be red...</p>';
  html += '<p>Me too...</p>';
  html += '<p>Ok... Me too...</p>';
  
  $('#draw').html(html);
});

.highlited {
  color: red;
}

@media print {
  .highlited {
    color: red;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="draw">
  <button id="click">Click me</button>
</div>

<hr />
<button onclick="window.print();">Print</button>

注意

在代码片段上运行完美，但当我在浏览器中尝试时却不行，在 codepen 上也是如此。

Code not working on CodePen

我使用的是谷歌浏览器。问题是什么，我该如何解决？提前致谢。

编辑

在这张图片中你可以看到我的问题，当你点击一个'

'元素时字体颜色变为红色但是当你点击打印按钮时显示为黑色，这发生在CodePen代码中我的浏览器，但我不知道为什么在片段代码上完美运行......

Answer 1

这就是您所需要的。有些网站有自己的媒体打印，所以你需要添加 -webkit-print-color-adjust: exact;到您的媒体打印品并且 !important 它以确保它覆盖任何其他媒体打印品。

http://codepen.io/anon/pen/JRXEko

<div id="draw">
  <button id="click">Click me</button>
</div>

<hr />
<button onclick="window.print();">Print</button>

.highlited {
  color: red;
}

@media print {
  .highlited {
    color: red !important;
    -webkit-print-color-adjust: exact;
  }
}

$('#draw').on('click', 'p', function () {
   if($(this).hasClass("highlited")) {
      $(this).removeClass("highlited");
   } else {
      $(this).addClass("highlited");
   }
});

$('#click').click(function () {
  var html = "";
  html += '<p>I want to be red...</p>';
  html += '<p>Me too...</p>';
  html += '<p>Ok... Me too...</p>';

  $('#draw').html(html);
});