Document: thuộc tính adoptedStyleSheets
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Thuộc tính adoptedStyleSheets của giao diện Document được sử dụng để thiết lập một mảng các stylesheet được xây dựng để sử dụng bởi tài liệu.
Note:
Một constructed stylesheet là một stylesheet được tạo theo chương trình bằng cách sử dụng phương thức khởi tạo CSSStyleSheet() (so với một stylesheet được tạo bởi user-agent khi nhập stylesheet từ một script, được nhập bằng <style> và @import, hoặc được liên kết qua <link>).
Các constructed stylesheet tương tự cũng có thể được chia sẻ với một hoặc nhiều instance ShadowRoot bằng cách sử dụng thuộc tính ShadowRoot.adoptedStyleSheets.
Thay đổi một stylesheet được adopted sẽ ảnh hưởng đến tất cả các đối tượng adopt nó.
Các stylesheet trong thuộc tính được đánh giá cùng với các stylesheet khác của tài liệu bằng cách sử dụng thuật toán cascade CSS.
Khi phân giải các quy tắc xem xét thứ tự stylesheet, adoptedStyleSheets được giả định được sắp xếp sau những stylesheet trong Document.styleSheets.
Chỉ các stylesheet được tạo bằng phương thức khởi tạo CSSStyleSheet() trong ngữ cảnh của Document hiện tại mới có thể được adopted.
Giá trị
Giá trị là một mảng các instance CSSStyleSheet phải được tạo bằng phương thức khởi tạo CSSStyleSheet() trong ngữ cảnh của cùng một Document.
Nếu mảng cần được sửa đổi, hãy sử dụng các phép biến đổi tại chỗ như push(). Các instance CSSStyleSheet cũng có thể được sửa đổi và những thay đổi này sẽ áp dụng ở bất cứ nơi nào stylesheet được adopted.
Trong phiên bản trước của đặc tả kỹ thuật, mảng không thể sửa đổi được, vì vậy cách duy nhất để thêm stylesheet mới là gán một mảng mới cho adoptedStyleSheets.
Ngoại lệ
NotAllowedErrorDOMException-
Một trong các instance
CSSStyleSheettrong mảng không được tạo bằng phương thức khởi tạoCSSStyleSheet()hoặc được xây dựng trong một tài liệu khác với tài liệu hiện tại, chẳng hạn như trong một frame.
Ví dụ
Adopting một stylesheet
Đoạn mã bên dưới hiển thị một stylesheet được xây dựng, sau đó CSSStyleSheet.replaceSync() được gọi để thêm một quy tắc vào sheet.
Stylesheet sau đó được thêm vào một mảng và gán cho thuộc tính 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);
Chúng ta có thể thêm một quy tắc mới vào stylesheet bằng cách sử dụng CSSStyleSheet.insertRule().
sheet.insertRule("* { background-color: blue; }");
// The document will now have blue background.
Chia sẻ stylesheet với một shadow DOM
Chúng ta có thể chia sẻ một stylesheet với một shadow root theo cách tương tự.
// 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];
Đặc tả kỹ thuật
| Specification |
|---|
| CSS Object Model (CSSOM) # dom-documentorshadowroot-adoptedstylesheets |