在前端开发中,可以使用window.print()
方法来控制打印页面。但是这个方法本身并不能直接改变CSS样式,而是调用浏览器的打印功能来输出页面。如果需要在打印前修改CSS样式,可以通过以下几种方式实现:
style
属性,直接设置样式。例如:<div id="printArea" style="color: red; font-size: 16px;">Hello, world!</div>
<button onclick="print()">Print</button>
<script>
function print() {
var printArea = document.getElementById("printArea");
printArea.style.color = "blue"; // 修改样式
window.print(); // 调用打印功能
}
</script>
<style id="printStyle">
.printText { color: red; font-size: 16px; }
</style>
<div class="printText">Hello, world!</div>
<button onclick="print()">Print</button>
<script>
function print() {
var printStyle = document.getElementById("printStyle");
printStyle.innerHTML = ".printText { color: blue; }"; // 修改样式
window.print(); // 调用打印功能
}
</script>
@media print
媒体查询,根据打印时的特殊需求来设置样式。例如:<style>
.printText { color: red; font-size: 16px; }
@media print {
.printText { color: blue; }
}
</style>
<div class="printText">Hello, world!</div>
<button onclick="print()">Print</button>
<script>
function print() {
window.print(); // 调用打印功能
}
</script>
以上是三种常用的方法来改变打印时的CSS样式。不同方法适用于不同场景,根据实际需求选择合适的方式进行样式修改。
领取专属 10元无门槛券
手把手带您无忧上云