In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > event handling > events > onbeforeprint

onbeforeprint event | beforeprint event

Browser support:

Occurs when the browser starts to build the contents of the current document for printing or for the print preview.

This event is commonly used together with the onafterprint event. With these two events, you can manipulate the contents and appearance of the current document for printing.

The onbeforeprint and onafterprint events are only supported by Internet Explorer. For a cross-browser solution, use the media style rule with the 'print' media type. See the examples for details.

How to register:

In HTML:

In JavaScript:

object.onbeforeprint = handler;

object.addEventListener ("beforeprint", handler, useCapture);

9

object.attachEvent ("onbeforeprint", handler);

You can find the related objects in the Supported by objects section below.

The event object is accessible to all event handlers in all browsers. The properties of the event object contain additional information about the current event. To get further details about these properties and the possible event handler registration methods, please see the page for the event object.

For a complete list of events, see the page for Events in JavaScript.

Basic information:

Bubbles	No
Cancelable	No
Event object	Event

Actions that invoke the onbeforeprint event:

Opening the print or print preview dialog (from a menu, contextmenu or with CTRL + P).
Invoking the window.print method.

The order of events related to the onbeforeprint event:

Action	Event order
Any action that invokes the onbeforeprint event.	onbeforeprint onafterprint

Example HTML code 1:

This example illustrates the use of the onbeforeprint event:

<head>
    <style>
        .forPrint {
            visibility: visible;
            color: red;
        }

        .forScreen {
            visibility: hidden;
        }
    </style>
    <script type="text/javascript">
        window.onbeforeprint = BeforePrint;
        window.onafterprint = AfterPrint;
        
        function BeforePrint () {
            var div = document.getElementById ("myDiv");
            div.className = "forPrint";
        }

        function AfterPrint () {
            var div = document.getElementById ("myDiv");
            div.className = "forScreen";
        }

        function Print () {
            window.print ();
        }
    </script>
</head>
<body>
    <div id="myDiv" class="forScreen">This text is only visible for printing.</div>
    <button onclick="Print ();">Print this page.</button>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

A cross-browser solution for the previous example:

<head>
    <style>
        @media print {
            #myDiv {
                visibility: visible;
                color: red;
            }
        }

        @media screen {
            #myDiv {
                visibility: hidden;
            }
        }
    </style>
    <script type="text/javascript">
        function Print () {
            window.print ();
        }
    </script>
</head>
<body>
    <div id="myDiv" class="forScreen">This text is only visible for printing.</div>
    <button onclick="Print ();">Print this page.</button>
</body>