CSSPageRule：style 屬性

Baseline 廣泛可用 *

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

* 此特性的某些部分可能存在不同級別的支援。

style 是 CSSPageRule 介面的一個只讀屬性，它返回一個 CSSPageDescriptors 物件。該物件表示 CSS @page at-rule 的 CSS 宣告塊，並公開了關於頁面樣式資訊以及各種與樣式相關的方法和屬性。

值

一個 CSSPageDescriptors 物件，其屬性與關聯的 @page at-rule 匹配。

注意： 規範的早期版本將此屬性定義為 CSSStyleDeclaration。請檢視下面的相容性資料以瞭解你的瀏覽器。

示例

檢查頁面規則

此示例使用 Web API 來檢查 @page 規則的內容。

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 230px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

CSS

下面我們使用 @page 規則為頁面定義樣式。我們使用 margin 簡寫為每個 margin 屬性分配不同的值，並指定 size。我們沒有設定 page-orientation。這使我們能夠檢視屬性如何在 Web API 物件中對映。

css

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

JavaScript

MDN 即時示例基礎結構將示例中的所有 CSS 塊合併到一個具有 id css-output 的內聯樣式中，因此我們首先使用 document.getElementById() 來查詢該樣式表。

const myRules = document.getElementById("css-output").sheet.cssRules;

然後，我們遍歷為即時示例定義的規則，並匹配所有型別為 CSSPageRule 的規則，因為這些規則對應於 @page 規則。對於匹配的物件，我們記錄 style 及其所有值。

for (const rule of myRules) {
  if (rule instanceof CSSPageRule) {
    log(`${rule.style}`);
    log(`margin: ${rule.style.margin}`);

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

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

    log(`size: ${rule.style.size}`);
    log("\n");
  }
}

結果

結果如下所示。請注意，該物件應為 CSSPageDescriptors 以匹配當前規範，但在某些瀏覽器中可能為 CSSStyleDeclaration。另請注意，駝峰式和蛇形命名屬性的相應值相互匹配並與 @page 宣告匹配，並且 page-orientation 是空字串 ""，因為它未在 @page 中定義。

規範

規範
CSS 物件模型 (CSSOM) # dom-csspagerule-style

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

本頁面最後修改於 ⁨2025年10月17日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題