Lompat ke konten Lompat ke sidebar Lompat ke footer

Mengatur Pemisahan Halaman HTML pageBreakInside Style DOM

Properti Style pageBreakInside DOM pada HTML merupakan properti yang digunakan untuk mengatur atau mengembalikan nilai page break di dalam elemen pada mode print atau print preview. Properti Style pageBreakInside tidak memberikan dampak apapun pada elemen posisi absolut.

Sebelum memahami lebih dalam materi tentang Mengatur Pemisahan Halaman HTML pageBreakInside Style DOM, terlebih dahulu pelajari materi tentang: Mengatur Pemisahan Halaman HTML pageBreakBefore Style DOM, Mengatur Pemisahan Halaman HTML pageBreakAfter Style DOM, dan Mengatur Lapisan Atas HTML Menggunakan paddingTop Style DOM.

Sintak:
  • digunakan untuk mendapatkan nilai properti: object.style.pageBreakInside
  • digunakan untuk mengatur nilai properti: object.style.pageBreakInside = "auto|avoid|initial|inherit"

Return Values: berfungsi untuk mengembalikan sebuah nilai string yang merepresentasikan behavior page-break yang berada di dalam elemen ketika dilakukan print.

Baca Juga:

Property Values:
  • auto: digunakan untuk memasukkan sebuah halaman di dalam elemen jika dibutuhkan.
  • avoid: digunakan untuk menghindari sebuah page page yang berada di dalam suatu elemen.
  • initial: digunakan untuk mengatur nilai properti ke nilai default-nya.
  • inherit: digunakan untuk menerima nilai turunan properti dari elemen parent.

Berikut adalah program ilustrasi dari properti Style pageBreakInside.

Contoh: menghindari sebuah page break yang berada di dalam elemen <p> dengan nilai id="footer".

<!DOCTYPE html>

<html>

 

<head>

 

<title>

Properti Style pageBreakInside 

DOM pada HTML

</title>

 

<style>

h1 

{

color: green;

}

 

h2 

{

font-family: Impact;

}

 

body 

{

text-align: center;

}

</style>

 

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Properti Style pageBreakInside

</h2>

 

<br>

 

<p id="myfooter">

Blog TIK merupakan portal ilmu 

komputer.

</p>

 

<p>

Untuk menghindari page break 

di dalam paragraf footer, 

double klik pada tombol "Avoid 

Page Break":

</p>

 

<br>

 

<button ondblclick="pagebreak()">

Avoid Page Break

</button>

 

<script>

function pagebreak() 

{

document.getElementById("myfooter")

.style.pageBreakInside = "avoid";

}

</script>

 

</body>

 

</html>

Output:

Blog Elfan

Properti Style pageBreakInside


Blog TIK merupakan portal ilmu komputer.

Untuk menghindari page break di dalam paragraf footer, double klik pada tombol "Avoid Page Break":




Catatan: untuk dapat melihat nilai output, simpan kode program pada dokumen HTMl dan jalankan pada browser. Nilai output dapat dilihat hanya dalam mode PRINT PREVIEW dari file tersebut.

Artikel ini didedikasikan kepada: Dinda Suci Anggraeni, Dionicius Cita Buana Liman, Dirra Eka Aprillyanti, Dwi Handayani, dan Dyah Ayu Puspaning Tyas.

5 komentar untuk "Mengatur Pemisahan Halaman HTML pageBreakInside Style DOM"

  1. Jenis browser-browser apa sajakah yang dapat digunakan untuk mengaktifkan properti pageBreakInside Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Berikut ini adalah beberapa jenis browser yang dapat digunakan untuk mengaktifkan properti pageBreakInside Style DOM pada HTML:
      1. Google Chrome
      2. Internet Explorer
      3. Firefox
      4. Opera
      5. Apple Safari

      Hapus
  2. Apa yang dimaksud dengan properti pageBreakInside Style DOM pada HTML?

    BalasHapus
    Balasan
    1. Properti pageBreakInside Style DOMp ada HTML merupakan properti yang digunakan untuk mengembalikan dan mengubah behavior page break untuk propses print atau print previw di dalam elemen HTML yang terdapat dalam dokumen HTML.

      Hapus
    2. Properti pageBreakInside Style DOMp ada HTML merupakan properti yang digunakan untuk mengembalikan perilaku page break yang berada di dalam elemen.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -