CSSStyleSheet

Baseline 廣泛可用 *

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

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

CSSStyleSheet 介面代表單個 CSS 樣式表，並允許您檢查和修改樣式表中包含的規則列表。它繼承了其父介面 StyleSheet 的屬性和方法。

樣式表由一組 CSSRule 物件組成，每個物件代表樣式表中的一條規則。這些規則包含在一個 CSSRuleList 中，可以透過樣式表的 cssRules 屬性獲取。

例如，一條規則可能是一個 CSSStyleRule 物件，其中包含類似以下樣式的樣式：

css

h1,
h2 {
  font-size: 16pt;
}

另一條規則可能是一個at-rule，例如 @import 或 @media，依此類推。

有關獲取 CSSStyleSheet 物件的各種方法，請參閱獲取樣式表部分。也可以直接構造 CSSStyleSheet 物件。建構函式以及 CSSStyleSheet.replace() 和 CSSStyleSheet.replaceSync() 方法是規範中較新的補充，支援可構造樣式表。

建構函式

CSSStyleSheet(): 建立一個新的 CSSStyleSheet 物件。

例項屬性

繼承其父介面 StyleSheet 的屬性。

CSSStyleSheet.cssRules 只讀: 返回一個即時 CSSRuleList，它維護著構成樣式表的 CSSRule 物件的最新列表。

注意： 在某些瀏覽器中，如果樣式表是從不同域載入的，訪問 cssRules 會導致 SecurityError。
CSSStyleSheet.ownerRule 只讀: 如果此樣式表透過 @import 規則匯入到文件中，則 ownerRule 屬性將返回相應的 CSSImportRule；否則，此屬性的值為 null。

例項方法

繼承其父介面 StyleSheet 的方法。

CSSStyleSheet.deleteRule(): 刪除樣式表規則列表指定索引處的規則。
CSSStyleSheet.insertRule(): 在樣式表的指定位置插入一條新規則，給定規則的文字表示。
CSSStyleSheet.replace(): 非同步替換樣式表的內容，並返回一個解析為更新後的 CSSStyleSheet 的 Promise。
CSSStyleSheet.replaceSync(): 同步替換樣式表的內容。

遺留屬性

這些屬性是 Microsoft 引入的遺留屬性；為相容現有網站而保留。

rules 只讀已棄用: rules 屬性在功能上與標準的 cssRules 屬性完全相同；它返回一個即時 CSSRuleList，該列表維護著樣式表中所有規則的最新列表。

遺留方法

這些方法是 Microsoft 引入的遺留方法；為相容現有網站而保留。

addRule() 已棄用

根據樣式所適用的選擇器以及應用於匹配元素的樣式塊，向樣式表新增新規則。

這與 insertRule() 不同，後者將整個規則的文字表示作為單個字串接收。

removeRule() 已棄用

在功能上與 deleteRule() 完全相同；從樣式表規則列表中移除指定索引處的規則。

獲取樣式表

一個樣式表最多與一個 Document 相關聯（除非停用），它應用於該文件。可以使用 Document.styleSheets 屬性獲取給定文件的 CSSStyleSheet 物件列表。也可以從其所有者物件（Node 或 CSSImportRule）訪問特定的樣式表（如果存在）。

當瀏覽器為文件載入樣式表時，瀏覽器會自動建立 CSSStyleSheet 物件並將其插入到文件的 Document.styleSheets 列表中。

以下是樣式表可能與文件相關聯的（可能不完整的）方式列表：

樣式表與文件相關聯的原因	出現在 `document. styleSheets` 列表中	透過樣式表物件獲取所有者元素/規則	所有者物件的介面	從所有者獲取 CSSStyleSheet 物件
文件中的 `<style>` 和 `<link>` 元素	是	`.ownerNode`	`HTMLLinkElement`, `HTMLStyleElement`, 或 `SVGStyleElement`	`HTMLLinkElement.sheet`, `HTMLStyleElement.sheet`, 或 `SVGStyleElement.sheet`
應用於文件的其他樣式表中的 CSS `@import` 規則	是	`.ownerRule`	`CSSImportRule`	`.styleSheet`
(非 HTML) 文件中的 `<?xml-stylesheet ?>` 處理指令	是	`.ownerNode`	`ProcessingInstruction`	`.sheet`
JavaScript `import ... with { type: "css" }`	否	N/A	N/A	N/A
HTTP Link Header	是	N/A	N/A	N/A
使用者代理（預設）樣式表	否	N/A	N/A	N/A

規範

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

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面最後修改於 ⁨2025年6月23日⁩，由 MDN 貢獻者修改。

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