JavaScript print Occasions

Media questions offer a terrific method to programmatically alter habits depending upon seeing state. We can target designs to gadget, pixel ratio, screen size, and even print. That stated, it’s likewise great to have JavaScript occasions that likewise permit us to alter habits. Did you understand you’re offered occasions both prior to and after printing?

I have actually constantly utilized @media print in stylesheets to manage print screen, however JavaScript offers beforeprint and afterprint occasions:

function toggleImages( conceal = incorrect) {
document.querySelectorAll(' img'). forEach( img => > {
img.style.display = conceal? 'none': ";.
} );.
}

// Conceal images to conserve toner/ink throughout printing.
window.addEventListener(' beforeprint', () => > toggleImages( real)).
window.addEventListener(' afterprint', () => > toggleImages());.

It might sound unusual however thinking about print is really essential, particularly when your site is documentation-centric. In my early days of web, I had a customer who just “seen” their site from print-offs. Styling with @media print is normally the very best choices however these JavaScript occasions might assist!