HTML DOM Style pageBreakBefore Property

HTMLDOMWeb DevelopmentFront End Technology

The HTML DOM Style pageBreakBefore property returns and modify the page-break behavior for printing or print preview before an HTML element in an HTML document.

Syntax

Following is the syntax −

1. Returning pageBreakBefore

object.pageBreakBefore

2. Modifying pageBreakBefore

object.pageBreakBefore = “value”

Here, value can be −

ValueExplanation
InitialIt set this property value to its default value.
inheritIt inherits this property value from its parent element
autoIt insert a page break before the element in an HTML document if necessary.
alwaysIt always insert a page break before the element in an HTML document.
avoidIt avoid a page break before the element in an HTML document.
leftIn it the next page can be considered as a left page when one or two page breaks are inserted before the element
rightIn it the next page can be considered as a right page when one or two page breaks are inserted before the element.
Empty string(“”)It doesn’t insert a page break before the element in an HTML document.

Let us see an example of HTML DOM Style pageBreakBefore Property −

Example

<!DOCTYPE html>
<html>
<style>
   body {
      color: #000;
      height: 100vh;
      background-color: #8BC6EC;
      background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
   }
   .btn {
      background: #db133a;
      border: none;
      height: 2rem;
      border-radius: 2px;
      width: 40%;
      display: block;
      color: #fff;
      outline: none;
      cursor: pointer;
      margin: 1rem auto;
   }
   p {
      text-align: center;
   }
</style>
<body>
<h1 style="text-align:center">DOM Style pageBreakBefore Property Demo</h1>
<p>
Hi! I'm a para element with some dummy text. Hi! I'm a para element with some dummy text.
</p>
<p class="page-break">
Hi! I'm second para element with some dummy text. Hi! I'm a second element with some dummy text.
</p>
<button onclick="set()" class="btn">Break Page Here</button>
<p>
Hi! I'm another para element with some dummy text. Hi! I'm another para element with some dummy text.
</p>
<script>
   function set() {
      document.querySelector(".page-break").style.pageBreakBefore = "always";
   }
</script>
</body>
</html>

Output

Now open print preview and observe how our html page would be displayed.

Now Click on the “red” button available on the web page and then again open the print preview to observe our webpage again. Here you can clearly see that our web page gets split into two pages.

raja
Published on 23-Sep-2019 15:14:20
Advertisements