CSSPageRule

Baseline 廣泛可用 *

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

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

CSSPageRule 表示單個 CSS @page 規則。

例項屬性

繼承其祖先 CSSGroupingRule 和 CSSRule 的屬性。

CSSPageRule.selectorText: 表示與 at-rule 關聯的頁面選擇器的文字。
CSSPageRule.style 只讀: 返回與 at-rule 關聯的宣告塊。

例項方法

繼承其祖先 CSSGroupingRule 和 CSSRule 的方法。

示例

過濾 page 規則

此示例顯示瞭如何為文件載入的 @page 規則查詢 CSSPageRule 物件。

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

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

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

CSS

下面我們使用 @page 規則為頁面定義樣式。

css

@page {
  margin: 1cm;
}

JavaScript

程式碼遍歷文件中的所有樣式表，以及每個樣式表中的所有 cssRules，記錄樣式表索引、規則數量以及每種規則物件的型別。然後，我們透過型別檢測 CSSPageRule 物件（不對該資訊執行任何操作）。

for (
  let sheetCount = 0;
  sheetCount < document.styleSheets.length;
  sheetCount++
) {
  const sheet = document.styleSheets[sheetCount].cssRules;
  log(`styleSheet: ${sheetCount}`);

  const myRules = document.styleSheets[sheetCount].cssRules;
  log(`rules: ${myRules.length}`);
  for (const rule of myRules) {
    log(`rule: ${rule}`);
    if (rule instanceof CSSPageRule) {
      // Do something with CSSPageRule
    }
  }
}

結果

結果如下所示。正如您所見，有兩個樣式表，分別對應於此主文件和示例程式碼框架，每個樣式表都有一些規則，其中只有一個是我們的 CSSPageRule。

規範

規範
CSS 物件模型 (CSSOM) # the-csspagerule-interface

瀏覽器相容性

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改時間為 ⁨2025年5月27日⁩，由 MDN 貢獻者修改。

在 GitHub 上檢視此頁面 • 報告此內容的錯誤