JS властивість CSSStyleDeclaration.pageBreakBefore

Загальний опис

element.style.pageBreakBefore – це властивість CSS, яка дозволяє контролювати, чи буде вставлений розрив сторінки перед певним елементом під час друку. Вона може приймати значення auto, always, avoid, left, right, inherit, initial, та unset.

Щоб використовувати element.style.pageBreakBefore в JavaScript, спочатку необхідно вибрати HTML-елемент, до якого ви хочете застосувати цю властивість. Найчастіше це робиться за допомогою методу document.querySelector або document.getElementById.

// Вибір елемента за ID
let element = document.getElementById('myElement');

// Встановлення розриву сторінки перед елементом
element.style.pageBreakBefore = 'always';

У цьому прикладі розрив сторінки буде завжди вставлений перед елементом з ID myElement під час друку. Це корисно, коли потрібно починати нову сторінку перед певним розділом документа.

Значення властивості

• auto: Браузер сам вирішує, чи потрібно вставляти розрив сторінки перед елементом.
• always: Завжди вставляє розрив сторінки перед елементом.
• avoid: Уникає розриву сторінки перед елементом, якщо це можливо.
• left: Вставляє розрив сторінки перед елементом, а наступна сторінка буде лівою.
• right: Вставляє розрив сторінки перед елементом, а наступна сторінка буде правою.
• inherit: Успадковує значення від батьківського елемента.
• initial: Встановлює значення за замовчуванням, яке є auto.
• unset: Видаляє будь-яке задане значення, повертаючи властивість до її початкового стану.

Приклад використання з різними значеннями

let element1 = document.querySelector('.section1');
element1.style.pageBreakBefore = 'avoid';

let element2 = document.querySelector('.section2');
element2.style.pageBreakBefore = 'right';

У цьому прикладі розрив сторінки перед елементом з класом section1 буде уникнутий, якщо це можливо, а перед елементом з класом section2 завжди буде вставлений розрив сторінки, і наступна сторінка буде правою.

element.style.pageBreakBefore найчастіше використовується в контексті підготовки документів до друку, таких як звіти, статті або будь-які інші друковані матеріали, де потрібно чітко контролювати розбивку контенту на сторінки. Встановлюючи різні значення цієї властивості, ви можете оптимізувати вигляд вашого документа при друці та зробити його більш читабельним.

// Повернення до значення за замовчуванням
let element3 = document.querySelector('.section3');
element3.style.pageBreakBefore = 'initial';

В цьому прикладі ми повертаємо властивість pageBreakBefore для елемента з класом section3 до її значення за замовчуванням, яке є auto. Це може бути корисно, коли потрібно скинути всі зміни і повернутися до початкового стану документа.

Загалом, element.style.pageBreakBefore є потужним інструментом для створення друкованих версій веб-документів, дозволяючи точно керувати, де повинні починатися нові сторінки. Це особливо корисно для довгих документів, де необхідно забезпечити правильну розбивку контенту для покращення читабельності та професійного вигляду.

правити

Порада

Використовуйте властивість element.style.pageBreakBefore для створення друкованих документів з повторюваними розділами, такими як заголовки або підрозділи. Це корисно для документів, що мають декілька частин, і де потрібно кожен розділ починати з нової сторінки.

let chapters = document.querySelectorAll('.chapter');
chapters.forEach(chapter => {
    chapter.style.pageBreakBefore = 'always';
});

автор: Bond правити

Порада

Не забувайте тестувати сторінки з розривами в різних браузерах та на різних пристроях. Різні браузери можуть по-різному інтерпретувати розриви сторінок, тому важливо переконатися, що ваші налаштування працюють правильно у всіх умовах.

let content = document.querySelector('.print-content');
if (window.matchMedia('print').matches) {
    content.style.pageBreakBefore = 'always';
}

автор: Bond правити

Порада

Застосовуйте element.style.pageBreakBefore в інтерфейсах, де користувач може динамічно додавати або видаляти контент. Це забезпечить, що нові розділи або секції завжди починаються з нової сторінки при друці, що зручно для створення звітів або інших документів на льоту.

document.getElementById('addSectionButton').addEventListener('click', () => {
    let newSection = document.createElement('div');
    newSection.className = 'new-section';
    newSection.style.pageBreakBefore = 'always';
    document.body.appendChild(newSection);
});

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.style.pageBreakBefore

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1.2	7	12	4

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

// Динамічне створення звіту з розривами сторінок перед кожним розділом
let sections = [
    { title: 'Вступ', content: 'Це вступна частина звіту.' },
    { title: 'Методологія', content: 'Методологія дослідження включає наступні кроки...' },
    { title: 'Результати', content: 'Результати дослідження показують, що...' },
    { title: 'Обговорення', content: 'Обговорення результатів містить аналіз...' },
    { title: 'Висновки', content: 'Висновки базуються на даних дослідження...' }
];

sections.forEach(section => {
    let sectionDiv = document.createElement('div');
    let title = document.createElement('h2');
    let content = document.createElement('p');
    
    title.textContent = section.title;
    content.textContent = section.content;
    
    sectionDiv.appendChild(title);
    sectionDiv.appendChild(content);
    
    sectionDiv.style.pageBreakBefore = 'always';
    
    document.body.appendChild(sectionDiv);
});

// Додавання розривів сторінок у списку елементів з різними умовами
let items = [
    'Елемент 1: Опис елементу 1.',
    'Елемент 2: Опис елементу 2.',
    'Елемент 3: Опис елементу 3.',
    'Елемент 4: Опис елементу 4.',
    'Елемент 5: Опис елементу 5.',
    'Елемент 6: Опис елементу 6.',
    'Елемент 7: Опис елементу 7.',
    'Елемент 8: Опис елементу 8.',
];

items.forEach((item, index) => {
    let itemDiv = document.createElement('div');
    itemDiv.textContent = item;
    
    // Додаємо розрив сторінки перед кожним парним елементом
    if ((index + 1) % 2 === 0) {
        itemDiv.style.pageBreakBefore = 'always';
    }
    
    document.body.appendChild(itemDiv);
});