CSSStyleSheet: replace() メソッド
Baseline 2023
Newly available
Since March 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
replace()
は CSSStyleSheet
インターフェイスのメソッドで、スタイルシートの内容を渡された内容で非同期に置き換えます。このメソッドは CSSStyleSheet
オブジェクトで解決されるプロミスを返します。
replace()
と CSSStyleSheet.replaceSync()
の両メソッドは、 CSSStyleSheet()
コンストラクターで作成されたスタイルシートでのみ使用できます。
構文
js
replace(text)
引数
返値
Promise
で、 CSSStyleSheet
に解決します。
例外
NotAllowedError
DOMException
-
次の 2 つの条件のうち一方が成立した場合に発生します。
- このスタイルシートが
CSSStyleSheet()
コンストラクターを使用して作成されていない。 - このスタイルシートが変更不可に設定されている。
- このスタイルシートが
例
次の例では、新しいスタイルシートを作成し、replace()
を使って 2 つの CSS ルールを追加しています。最初のルールはコンソールに body { font-size: 1.4em; }
と表示されます。
js
const stylesheet = new CSSStyleSheet();
stylesheet
.replace("body { font-size: 1.4em; } p { color: red; }")
.then(() => {
console.log(stylesheet.cssRules[0].cssText);
})
.catch((err) => {
console.error("Failed to replace styles:", err);
});
仕様書
Specification |
---|
CSS Object Model (CSSOM) # dom-cssstylesheet-replace |
ブラウザーの互換性
BCD tables only load in the browser
関連情報
- Constructable Stylesheets (web.dev)
- シャドウ DOM の使用