HTML | DOM Style pageBreakBefore Property

The pageBreakBefore property in HTML DOM is used to set or return the page-break-before characteristics before the specified element in HTML document. This property works in print and print preview mode. The pageBreakBefore property has no effect on absolutely positioned elements in the HTML DOM. The page break before attribute can only be effected in the print preview mode and in the hard copy.

Syntax:

  • It returns the pageBreakBefore property.
    object.style.pageBreakBefore
  • It is used to set the pageBreakBefore property.
    object.style.pageBreakBefore = "auto|always|avoid|emptystring|left
                 |right|initial|inherit"

Property Values:



  • auto: It is the default value. It is used to break the page before the element if necessary.
  • always: This value always insert a page break before the element.
  • avoid: This value avoids the page break before the element
  • emptystring: This value is used when page break is not inserted before the element.
  • left: It is used to insert one or two page break before the element, so the next page is considered to be a left page.
  • right: It is used to insert one or two page breaks before the element, so the next page is considered to be a right page.
  • initial: The pageBreakBefore property is used to set its default value.
  • inherit: It is inherited from its parent element.

Return Value: It returns a string which represents the page-break property before the specified element while printing.

Example 1:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>
            DOM Style pageBreakBefore Property 
        </title
    </head
      
    <body
        <h1>GeeksforGeeks</h1>
              
        <h2 id = "footer">
            DOM Style pageBreakBefore Property 
        </h2>
          
        <button type = "button" onclick = "geeks()"
                PageBreak 
            </button
              
        <script
            function geeks() { 
            document.getElementById("footer").style.pageBreakBefore
                    = "always";
                                                      
            
        </script
    </body
</html>                    

chevron_right


Output:
Print-preview before clicking on the button:

Print-preview afterclicking on the button:

Example 2: To avoid the page break before the element.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html> 
<html
    <head
        <title>
            DOM Style pageBreakBefore Property 
        </title
    </head
      
    <body
        <h1>GeeksforGeeks</h1>
              
        <h2 id = "footer">
            DOM Style pageBreakBefore Property 
        </h2>
          
        <button type = "button" onclick = "geeks()"
                PageBreak 
            </button
              
        <script
            function geeks() { 
            document.getElementById("footer").style.pageBreakBefore
                    = "avoid";
                                                      
            
        </script
    </body
</html>                    

chevron_right


Output:
Print-preview before clicking on the button:

Print-preview after clicking on the button:

Supported Browsers: The browser supported by DOM Style pageBreakBefore property are listed below:

  • Google Chrome
  • Internet Explorer
  • Firefox
  • Safari
  • Opera


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :
Practice Tags :


Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.