Thuộc tính HTML DOM Style pageBreakBefore trả về và sửa đổi hành vi ngắt trang để in hoặc xem trước bản in trước phần tử HTML trong tài liệu HTML.
Cú pháp
Sau đây là cú pháp -
1. Trả lại trangBreakBefore
object.pageBreakBefore
2. Sửa đổi trangBreakBefore
object.pageBreakBefore = “value”
Đây, giá trị có thể -
| Giá trị | Giải thích |
|---|---|
| Ban đầu | Nó đặt giá trị thuộc tính này thành giá trị mặc định. |
| kế thừa | Nó kế thừa giá trị thuộc tính này từ phần tử mẹ của nó |
| tự động | Nó chèn dấu ngắt trang trước phần tử trong tài liệu HTML nếu cần. |
| luôn luôn | Nó luôn chèn dấu ngắt trang trước phần tử trong tài liệu HTML. |
| tránh | Nó tránh ngắt trang trước phần tử trong tài liệu HTML. |
| còn lại | Trong đó, trang tiếp theo có thể được coi là trang bên trái khi một hoặc hai ngắt trang được chèn trước phần tử |
| đúng | Trong đó, trang tiếp theo có thể được coi là trang bên phải khi một hoặc hai ngắt trang được chèn trước phần tử. |
| Chuỗi trống (“”) | Nó không chèn ngắt trang trước phần tử trong tài liệu HTML. |
Hãy để chúng tôi xem một ví dụ về HTML DOM Style pageBreakBefore Property -
Ví dụ
<!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> Đầu ra
Bây giờ, hãy mở bản xem trước khi in và quan sát cách trang html của chúng tôi sẽ được hiển thị.
Bây giờ, hãy nhấp vào nút “ đỏ ”Có sẵn trên trang web và sau đó mở lại bản xem trước khi in để quan sát lại trang web của chúng tôi. Ở đây, bạn có thể thấy rõ rằng trang web của chúng tôi được chia thành hai trang.
