打印预览中未显示CSS样式

Question

我正在尝试创建一个功能来更改我的字体颜色，但我需要打印它，此刻一切都还可以，但我在打印时遇到CSS问题，这里是我的代码

＆＃13;

＆＃13;

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

＆＃13;

.highlited {
  color: red;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

注意

On snippet工作得很完美，但是当我在浏览器中尝试而不是在codepen上时。

Code not working on CodePen

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

修改

在此图片中，您可以看到我的问题，当您点击＆＃39;

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

Answer 1

这就是你需要的。有些网站有自己的媒体打印，所以你需要添加-webkit-print-color-adjust：exact;对您的媒体打印和！重要的是确保它覆盖任何其他媒体打印。

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标签不在页面上。试试这个：

str => (/\d{1,3} *GB(?![\s\S]*RAM)/.exec(str.replace(/SD[\s\S]*$/, '')) || [null])[0]

https://jsbin.com/fetumucero/edit?html,css,js,console,output

Answer 3

也许是codepen？

查看解释plpler：

plnkr.co/edit/NZrYQdGNOntaVwkvK4ZH?p=preview

问候！