使用javascript样式打印页面

Print page with javascript styling

本文关键字：式打印 样式 javascript 使用      更新时间：2023-09-26

我有一个包含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>

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

一些浏览器支持非标准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设置为一个更大的值。

相关文章：