Skip to content
Related Articles

Related Articles

HTML | DOM Style pageBreakBefore Property
  • Last Updated : 25 Jan, 2019

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:






<!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>                    


Output:
Print-preview before clicking on the button:

Print-preview afterclicking on the button:

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




<!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>                    


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

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :