javascript - 使用 JavaScript 样式打印页面

Question

我有一个包含 60 个不同输入的页面。它们都是数字，需要根据输入之一进行检查。如果该输入比父级 div 大 3，则更改为红色。一切都工作得很好，除非我尝试打印通过 javascript 函数提供的样式 (document.getElementById(classid).style.backgroundColor = "red";) 不显示打印。如何让页面以函数给定的样式打印？

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

众多输入之一:

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

Answer 1

正如我在评论中所说，它基于浏览器的打印设置。您可以在浏览器的设置中启用它，它只会正常打印它们，但默认情况下它被禁用以节省墨水。

某些浏览器支持非标准 CSS 来强制打印 BG

-webkit-print-color-adjust: exact

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

另一个退路是使用盒子阴影

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

如果您在较大的文本区域上使用它，您可能需要将 100px 设置为更大的值。