CSSPageRule: свойство style

Только для чтения style свойство интерфейса CSSPageRule возвращает объект CSSPageDescriptors. Он представляет собой блок объявления CSS для CSS-правила страницы правило и предоставляет информацию о стиле, а также различные методы и свойства, связанные со стилем для страницы.

Объект CSSPageDescriptors со свойствами, которые соответствуют связанному правилу страницы правилу.

Этот пример использует веб-API для проверки содержимого правила правила страницы.

CSS

Ниже мы определяем стили для страницы с помощью правила правила страницы. Мы назначаем различные значения для каждого свойства отступа с помощью сокращенного margin синтаксиса и также указываем size. Мы не задаем page-orientation. Это позволяет нам увидеть, как свойства отображаются в объекте веб-API.

@page {
  margin: 1cm 2px 3px 4px;
  /* page-orientation: upright; */
  size: A4;
}

JavaScript

Код сначала получает таблицу стилей документа с индексом 1, а затем получает cssRules, определённое в этой таблице стилей. Нам необходимо получить эту таблицу стилей, так как пример вставлен в отдельную рамку со своим собственным листом (индекс 0 — CSS для этой страницы).

const myRules = document.styleSheets[1].cssRules;

Затем мы перебираем правила, определённые для активного примера, и находим те, тип которых CSSPageRule, так как они соответствуют @page правилам. Для соответствующих объектов мы затем регистрируем style и все его значения.

for (let i = 0; i < myRules.length; i++) {
  if (myRules[i] instanceof CSSPageRule) {
    log(`${myRules[i].style}`);
    log(`margin: ${myRules[i].style.margin}`);

    // Access properties using CamelCase properties
    log(`marginTop: ${myRules[i].style.marginTop}`);
    log(`marginRight: ${myRules[i].style.marginRight}`);
    log(`marginBottom: ${myRules[i].style.marginBottom}`);
    log(`marginLeft: ${myRules[i].style.marginLeft}`);
    log(`pageOrientation: ${myRules[i].style.pageOrientation}`);

    // Access properties using snake-case properties
    log(`margin-top: ${myRules[i].style["margin-top"]}`);
    log(`margin-right: ${myRules[i].style["margin-right"]}`);
    log(`margin-left: ${myRules[i].style["margin-left"]}`);
    log(`margin-bottom: ${myRules[i].style["margin-bottom"]}`);
    log(`page-orientation: ${myRules[i].style["page-orientation"]}`);

    log(`size: ${myRules[i].style.size}`);
    log("\n");
  }
}

Результаты

Результаты показаны ниже. Обратите внимание, что объект должен быть CSSPageDescriptors в соответствии с текущей спецификацией, но может быть CSSStyleDeclaration в некоторых браузерах. Обратите также внимание, что соответствующие значения свойств в верблюжьем и змеином регистрах совпадают друг с другом и с @page объявлением, и page-orientation является пустой строкой "", потому что она не определена в @page.