Thuộc tính pageBreakBefore của Style trong HTML DOM

Thuộc tính pageBreakBefore của Style trong HTML DOM trả về và cho phép sửa đổi hành vi ngắt trang khi in hoặc xem trước in trước một phần tử HTML trong tài liệu HTML.

Cú pháp

Cú pháp như sau:

1. Lấy giá trị pageBreakBefore

object.pageBreakBefore

2. Thiết lập pageBreakBefore

object.pageBreakBefore = "value"

Ở đây, value có thể là:

Ví dụ

Dưới đây là ví dụ minh họa thuộc tính pageBreakBefore của Style:

<!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">Demo thuộc tính pageBreakBefore của Style</h1>
<p> Xin chào! Tôi là một phần tử đoạn văn với một số văn bản giả. Xin chào! Tôi là một phần tử đoạn văn với một số văn bản giả. </p>
<p class="page-break"> Xin chào! Tôi là đoạn văn thứ hai với một số văn bản giả. Xin chào! Tôi là phần tử thứ hai với một số văn bản giả. </p>
<button onclick="set()" class="btn">Ngắt trang tại đây</button>
<p> Xin chào! Tôi là một đoạn văn khác với một số văn bản giả. Xin chào! Tôi là một đoạn văn khác với một số văn bản giả. </p>
<script>
  function set() {
    document.querySelector(".page-break").style.pageBreakBefore = "always";
  }
</script>
</body>
</html>

Kết quả

Mở xem trước in và quan sát trang HTML của chúng ta sẽ hiển thị như thế nào.

Bây giờ nhấn vào nút "màu đỏ" trên trang web và sau đó mở lại xem trước in để quan sát trang web của chúng ta lại. Ở đây bạn có thể thấy rõ ràng rằng trang web của chúng ta bị chia thành hai trang.