Open In App

HTML | DOM Style pageBreakBefore Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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: 

HTML




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

HTML




<!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 1
  • Edge 12
  • Internet Explorer 4
  • Firefox 1
  • Safari 1.2
  • Opera 7


Last Updated : 08 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads