CODEWITHSUNDEEP
javascriptprinting
Buster
Buster

Reputation: 697

Print page with javascript styling

I have a page with 60 different inputs. They are all numbers and need to be checked against one of the inputs. If that input is 3 greater than the parent div changes to red. Everything works beautifully except if I try to print the style I give through my javascript function (document.getElementById(classid).style.backgroundColor = "red";) does not display print. How do I get the page to print with the style given by the function?

<script type="text/javascript">
function CheckThisNumber(val, id){
    var x = document.getElementById("a6").value;
    var y = Number(x) +3;
    var classid = "p" + id;
    if((val)>=y) { 
    document.getElementById(classid).style.backgroundColor = "red"; } 
    else { document.getElementById(classid).style.backgroundColor = "white"; }
}
</script>

One of the many inputs:

<div class="a1" id="pa1">
<strong>A1</strong><br><input type="number" name="a1" id="a1" style="width:95%" onKeyUp="CheckThisNumber(this.value,this.id)">
</div>

Upvotes: 0

Views: 91

Answers (1)

epascarello
epascarello

Reputation: 207511

As I said in the comments, it is based on the browser's print settings. You can enable it in the browser's settings and it would just print them normally, but by default it is disabled to save ink.

Some browser support a non-standard CSS to force the BG to print

-webkit-print-color-adjust: exact

info: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-print-color-adjust

And another fall back would be to use box shadows

.redBG { box-shadow: inset 0 0 0 100px #FF0000; }
.whiteBG { box-shadow: inset 0 0 0 100px #FFFFFF; }

If you are using it on a large textarea, you might need to set the 100px to a much larger value.

Upvotes: 1

Related Questions