I am currently working on creating a function to change the font color, however, I am facing issues with the CSS when it comes to printing. Here is the code I have:
$('#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>NOTE
The code snippet works perfectly, but I am facing issues when testing it in my browser and on CodePen as well.
I am using Google Chrome. Can anyone help me identify the problem and provide a solution? Thank you in advance.
EDIT
In the image provided, you can see the issue I am facing. When I click on a '
' element, the font color changes to red. However, when I click on the print button, it appears in black. This issue occurs with both the CodePen code and in my browser, but interestingly, it works perfectly in the Snippet code...