คุณสมบัติ pageBreakBefore ของ Style ใน HTML DOM

คุณสมบัติ pageBreakBefore ของ HTML DOM Style ใช้สำหรับคืนค่าและแก้ไขพฤติกรรมการขีดหน้าสำหรับการพิมพ์หรือตัวอย่างการพิมพ์ก่อนองค์ประกอบ HTML ในเอกสาร HTML

ไวยากรณ์

1. การคืนค่า pageBreakBefore

object.pageBreakBefore

2. การแก้ไข pageBreakBefore

object.pageBreakBefore = "value"

ที่นี่ value สามารถเป็นได้ดังนี้:

ตัวอย่าง

<!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">ตัวอย่างคุณสมบัติ Style pageBreakBefore ของ DOM</h1>
<p> สวัสดี! ฉันคือองค์ประกอบพารากราฟพร้อมข้อความตัวอย่าง. สวัสดี! ฉันคือองค์ประกอบพารากราฟพร้อมข้อความตัวอย่าง. </p>
<p class="page-break"> สวัสดี! ฉันคือพารากราฟที่สองพร้อมข้อความตัวอย่าง. สวัสดี! ฉันคือองค์ประกอบที่สองพร้อมข้อความตัวอย่าง. </p>
<button onclick="set()" class="btn">ขีดหน้าที่นี่</button>
<p> สวัสดี! ฉันคือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. สวัสดี! ฉันคือพารากราฟอีกอันหนึ่งพร้อมข้อความตัวอย่าง. </p>
<script>
  function set() {
    document.querySelector(".page-break").style.pageBreakBefore = "always";
  }
</script>
</body>
</html>

ผลลัพธ์

เปิดตัวอย่างการพิมพ์และสังเกตว่าหน้า HTML จะแสดงอย่างไร

ตอนนี้คลิกปุ่ม "สีแดง" บนหน้าเว็บแล้วเปิดตัวอย่างการพิมพ์อีกครั้ง คุณจะเห็นชัดเจนว่าหน้าเว็บถูกแบ่งเป็นสองหน้า