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

Значення

Return

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2

// Динамічне створення звіту з розривами сторінок перед кожним розділом
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);
});