HTML Code

<!DOCTYPE html>



<html lang=en>



<head>



  <meta charset=UTF-8>



  <meta name=viewport content="width=device-width,initial-scale=1">



  <title>onafterprint — with beforeprint</title>



  <style>body{font-family:system-ui,sans-serif;margin:0;padding:1.5rem;background:#f8fafc;color:#334155;line-height:1.7;transition:background .2s}body.print-mode{background:#fef9c3;outline:4px dashed #ca8a04}h1{margin:0 0 .75rem;font-size:1.25rem;color:#0f172a}.banner{display:inline-block;padding:.35rem .65rem;background:#e2e8f0;border-radius:6px;font-size:.75rem;font-weight:600;margin-bottom:.75rem}body.print-mode .banner{background:#fde047;color:#713f12}button{padding:.5rem 1rem;font:inherit;cursor:pointer;border-radius:6px;border:1px solid #1d4ed8;background:#2563eb;color:#fff}.note{margin-top:1rem;font-size:.8125rem;color:#64748b;max-width:480px}code{background:#e2e8f0;padding:.1rem .35rem;border-radius:4px}</style>



</head>



<body>



  <span class=banner id=mode>Screen mode</span>



  <h1>beforeprint + afterprint</h1>



  <p>Common pattern: add a class before printing, remove it after the dialog closes.</p>



  <button type=button onclick=window.print()>Print preview</button>



  <p class=note id=note>Print dialog open → yellow print-mode. After close → back to normal.</p>







  <script>window.addEventListener("beforeprint",(function(){document.body.classList.add("print-mode"),document.getElementById("mode").textContent="Print mode (beforeprint)"})),window.addEventListener("afterprint",(function(){document.body.classList.remove("print-mode"),document.getElementById("mode").textContent="Screen mode (afterprint)",document.getElementById("note").textContent="afterprint restored screen styles — even if you canceled printing."}))</script>



</body>



</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

HTML onafterprint Attribute — Pair with beforeprint