CSSStyleSheet: метод replace()

Метод replace() интерфейса CSSStyleSheet асинхронно заменяет содержимое стилей на содержимое, переданное в него. Метод возвращает промис, который разрешается с объектом CSSStyleSheet.

Методы replace() и CSSStyleSheet.replaceSync() могут быть использованы только для таблиц стилей, созданных с помощью конструктора CSSStyleSheet().

text

Строка, содержащая правила стилей, которые заменят содержимое таблицы стилей. Если строка не содержит допустимый список правил, значение будет установлено в пустую строку.

Примечание: Если какие-либо правила, переданные в text — это внешние таблицы стилей, импортированные с помощью правила @import, эти правила будут удалены, и предупреждение будет выведено в консоль.

Промис Promise, который разрешается с объектом CSSStyleSheet.

NotAllowedError DOMException

Выбрасывается, если выполняется одно из следующих условий:

• Таблица стилей не была создана с помощью конструктора CSSStyleSheet().
• Таблица стилей помечена как неизменяемая.

В следующем примере создается новая таблица стилей и добавляются два правила CSS с помощью replace(). Первое правило затем выводится в консоль, которое вернет: body { font-size: 1.4em; }

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);
  });

• Конструируемые таблицы стилей (web.dev)
• Использование Shadow DOM