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上尝试时。

代码不适用于CodePen

我正在使用Google Chrome。 有什么问题，我该如何解决？ 提前致谢。

编辑

在这张照片中，您可以看到我的问题，当您单击“

'元素的字体颜色变为红色，但是当您单击打印按钮时显示为黑色，这是在CodePen代码和我的浏览器中发生的，但是我不知道为什么在Snippet代码上能完美工作...

Answer 1

这就是你所需要的。 一些站点具有自己的媒体打印，因此您需要添加-webkit-print-color-adjust： 并重要！以确保它能覆盖所有其他媒体打印。

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);
});

Answer 2

您的问题是，在单击#click之前，p标签不在页面上。 尝试以下方法：

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

https://jsbin.com/fetumucero/edit?html,css,js，控制台，输出

Answer 3

也许是codepen？

查看示例plnkr：

plnkr.co/edit/NZrYQdGNOntaVwkvK4ZH?p=preview

问候！