Как динамически добавить таблицу стилей с помощью Dart?

Я знаю в Javascript, как динамически добавлять таблицу стилей. Это можно сделать с помощью следующего кода:

var sheet = document.createElement('style');

Но когда я пытаюсь сделать то же самое с помощью Dart (https://www.dartlang.org/), вот так:

CssStyleSheet sheet = document.createElement('style');

Затем Dart-редактор сообщает мне "Значение типа Element не может быть присвоено переменной типа CssStyleSheet".

Я также пробовал это так:

CssStyleSheet styleSheet = new CssStyleSheet();

Но это дает мне предупреждение "Класс CssStyleSheet не имеет конструктора по умолчанию"

И это:

CssStyleSheet sheet = DomImplementation.createCssStyleSheet('mySheet', '');

Выдает «Экземпляр 'createCssStyleSheet' не может быть доступен с использованием статического доступа».


Итак, мой вопрос: как мне создать CssStyleSheet в Dart, чтобы Я могу использовать такие методы, как insertRule(rule, index) и deleteRule(index)?

С уважением,
Хендрик


dart dom dart-html stylesheet
person Hendrik Jan    schedule 07.05.2014    source источник
comment
возможный дубликат Как создать правило ключевого кадра CSS в Dart   -  person Günter Zöchbauer    schedule 07.05.2014
comment
Спасибо за уведомление. Это не дубликат, потому что я хочу создать новую таблицу стилей динамически, а ваша ссылка указывает на вопрос, в котором используется уже существующая таблица стилей.   -  person Hendrik Jan    schedule 07.05.2014
comment
Хорошо, у меня сложилось впечатление, что это не обязательно. Можете ли вы попробовать document.head.append(new StyleElement());, а затем продолжить пример с «дубликатом»?   -  person Günter Zöchbauer    schedule 07.05.2014

Ответы (3)


arrow_upward
6
arrow_downward

Я попробовал это, и это сработало для меня:

import 'dart:html' as dom;

main () {
  dom.document.head.append(new dom.StyleElement());
  final styleSheet = dom.document.styleSheets[0] as dom.CssStyleSheet;
  final rule = 'div { color: blue; }';
  styleSheet.insertRule(rule, 0);
}
person Günter Zöchbauer    schedule 07.05.2014
comment
Спасибо. Ваше решение работает, но dom.document.styleSheets[0] не возвращает вновь созданную таблицу стилей. Я добавил свое собственное решение в качестве еще одного ответа. - person Hendrik Jan; 07.05.2014
comment
Это интересно, потому что без первой строки я получаю RangeError, когда пытаюсь получить доступ к dom.document.styleSheets[0]. Рад, что вы нашли то, что сработало для вас. - person Günter Zöchbauer; 07.05.2014
comment
Возможно, вы использовали код в пустом документе, где единственная таблица стилей — это ваша динамически добавленная таблица стилей (или ничего, если вы удалили первую строку). Я использовал его в документе, где уже была загружена пара таблиц стилей, а затем dom.document.styleSheets[0] возвращает первую уже загруженную таблицу стилей. - person Hendrik Jan; 07.05.2014
comment
Ты прав. Я думал, что вы получили тот же RangeError, когда вы написали, что решение в «дубликате» не работает для вас. Спасибо за ответ! - person Günter Zöchbauer; 07.05.2014

arrow_upward
7
arrow_downward

Ответ Гюнтера Цохбауэра помог мне найти решение (см. мой комментарий к его ответу).
Это работает:

import 'dart:html';

main () {
  // create a stylesheet element
  StyleElement styleElement = new StyleElement();
  document.head.append(styleElement);
  // use the styleSheet from that
  CssStyleSheet sheet = styleElement.sheet;

  final rule = 'div { border: 1px solid red; }';
  sheet.insertRule(rule, 0);
}
person Hendrik Jan    schedule 07.05.2014
comment
Я попробовал ваше решение - по некоторым причинам у меня есть пустой элемент ‹style›‹/style›, добавленный в заголовок. Разве у вас не было такого же опыта? - person Zufar Muhamadeev; 21.05.2018

arrow_upward
1
arrow_downward

Для тех, кому нужно добавить внешнюю таблицу стилей, вот как вы это делаете.

LinkElement link = document.head.append(LinkElement());
link.type = "text/css";
link.rel = "stylesheet";
link.href = "/site.css";
person markt    schedule 21.12.2020