Print page with javascript styling

Question

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>

Because your browser/printer is set up to not print background colors. Nothing to do with JavaScript/HTML and nothing that JavaScript/CSS/HTML can fix.There is developer.mozilla.org/en-US/docs/Web/CSS/… but it is not standard. — epascarello
– epascarello, Commented Nov 7, 2014 at 17:11
Hmm ok. Is there an alternative to background-color that will print? Does border-color work or another option that will give a similar effect? — Buster
– Buster, Commented Nov 7, 2014 at 17:13

epascarello · Accepted Answer · 2014-11-07 17:21:12Z

1

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.

answered Nov 7, 2014 at 17:21

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

somethinghere Over a year ago

Oooooo... that webkit-print-color-adjust is neat. I did not know that.

Collectives™ on Stack Overflow

Print page with javascript styling

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related