媒体查询提供了一种根据查看状态以编程方式更改行为的好方法。我们可以将样式定位到设备、像素比、屏幕尺寸,甚至打印。也就是说,拥有允许我们更改行为的 JavaScript 事件也很不错。您知道您在打印前后都会收到事件吗?
我一直在样式表中使用@media print
来控制打印显示,但 JavaScript 提供了beforeprint
和afterprint
事件:
功能切换图像(隐藏=假){ document.querySelectorAll('img').forEach(img => { img.style.display = 隐藏? '没有任何' : ''; }); } // 在打印过程中隐藏图像以节省碳粉/墨水 window.addEventListener('beforeprint', () => toggleImages(true)) window.addEventListener('afterprint', () => toggleImages());
这听起来可能很奇怪,但考虑到打印非常重要,尤其是当您的网站以文档为中心时。在我早期的网络时代,我有一个客户只从印刷品中“查看”他们的网站。使用@media print
样式通常是最好的选择,但这些 JavaScript 事件可能会有所帮助!
JavaScript 打印事件帖子首先出现在David Walsh 博客上。