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
Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!
Last Updated :
08 Aug, 2022
Like Article
Save Article