I'm trying to create a function to change my font color but I need to print it, at the moment all it's ok but I'm having problems with the CSS on print, here is my code

$('#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=".1.1/jquery.min.js"></script>

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

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

I'm trying to create a function to change my font color but I need to print it, at the moment all it's ok but I'm having problems with the CSS on print, here is my code

$('#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./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>

NOTE

On snippet works perfect but when I try it in my browser not and on codepen too.

Code not working on CodePen

I'm using Google Chrome. What is the problem and how can I solve it? Thanks in advance.

EDIT

In this picture you can see my problem, When you click a '

' element the font color change to red but when you click on print button appears in black, this happen with CodePen code and in my browser but I don't know why works perfectly on Snippet code...

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Sep 14, 2016 at 18:55 asked Sep 14, 2016 at 18:39 user6446331user6446331 6

• I don't understand your question: what would you like to achieve and what is happening instead? – benomatis Commented Sep 14, 2016 at 18:42
• if you're trying to underline, you need to tell it to. Currently all you're doing is changing the color. – Keith Commented Sep 14, 2016 at 18:43
• @webeno I'm trying to show the font color=red with this code, on snippet works fine, but on CodePen link and on my browser not, doesn't matter what I do the font color always is black. – user6446331 Commented Sep 14, 2016 at 18:45
• @Keith That's what I want, that's what I write "to underline my text (change font color) ." – user6446331 Commented Sep 14, 2016 at 18:46
• I don't get it, underline and changing font color is not the same action in my world... also, I see no underlining or font color change in the snippet either, to be honest... nonetheless it's useless for you to define color red twice, once separately for print, if it's defined by default, and you don't want it to be different in print, it will just pick up whatever that selector has been set to, ie. there will be no difference between the browser view and print, assuming that's what you wanted to achieve... – benomatis Commented Sep 14, 2016 at 18:49

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 5

This is what you need. Some sites have their own media print so you need to add -webkit-print-color-adjust: exact; to your media print and !important it to make sure it overrides any other media print.

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

Your issue is that the p tags are not on the page until you have clicked #click. Try this instead:

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

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

Maybe the codepen?

View explaple plnkr:

plnkr.co/edit/NZrYQdGNOntaVwkvK4ZH?p=preview

regards!