文件：adoptedStyleSheets 屬性
Document 介面的 adoptedStyleSheets 屬性用於設定一個由構造樣式表組成的陣列，供文件使用。
注意： 構造樣式表是使用 CSSStyleSheet() 建構函式以程式設計方式建立的樣式表（與使用者代理在從指令碼匯入樣式表、使用 <style> 和 @import 匯入或透過 <link> 連結時建立的樣式表不同）。
相同的構造樣式表也可以使用 ShadowRoot.adoptedStyleSheets 屬性與一個或多個 ShadowRoot 例項共享。更改已採用的樣式表將影響所有采用它的物件。
屬性中的樣式表與文件的其他樣式表一起使用 CSS 層疊演算法進行評估。在規則解析考慮樣式表順序時，adoptedStyleSheets 被假定在 Document.styleSheets 中的樣式表之後。
只有在當前 Document 的上下文中使用 CSSStyleSheet() 建構函式建立的樣式表才能被採用。
值
該值是一個 CSSStyleSheet 例項陣列，這些例項必須在同一個 Document 的上下文中，使用 CSSStyleSheet() 建構函式建立。
如果需要修改陣列，請使用 push() 等就地修改。CSSStyleSheet 例項本身也可以被修改，這些更改將應用於採用該樣式表的所有地方。
在規範的早期版本中，該陣列不可修改，因此新增新樣式表的唯一方法是為 adoptedStyleSheets 分配一個新陣列。
異常
NotAllowedErrorDOMException-
陣列中的某個
CSSStyleSheet例項不是使用CSSStyleSheet()建構函式建立的，或者是在與當前文件不同的文件中構造的，例如在框架中的文件。
示例
採用樣式表
下面的程式碼展示了一個樣式表被構造，然後呼叫 CSSStyleSheet.replaceSync() 來向樣式表新增一個規則。然後將樣式表新增到一個數組並賦值給 adoptedStyleSheets 屬性。
// Create an empty "constructed" stylesheet
const sheet = new CSSStyleSheet();
// Apply a rule to the sheet
sheet.replaceSync("a { color: red; }");
// Apply the stylesheet to a document
document.adoptedStyleSheets.push(sheet);
我們可以使用 CSSStyleSheet.insertRule() 向樣式表新增新規則。
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
與 Shadow DOM 共享樣式表
我們可以以類似的方式將樣式表共享給 Shadow Root。
// Create an element in the document and then create a shadow root:
const node = document.createElement("div");
const shadow = node.attachShadow({ mode: "open" });
// Adopt the same sheet into the shadow DOM
shadow.adoptedStyleSheets = [sheet];
規範
| 規範 |
|---|
| CSS 物件模型 (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |
瀏覽器相容性
載入中…