Question

我在Javascript中知道如何动态添加样式表。这可以使用以下代码完成：

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

但是当我尝试使用Dart（https://www.dartlang.org/）时，就像这样：

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

然后Dart编辑器告诉我“元素类型的值不能分配给CssStyleSheet类型的变量”。

我也尝试过这样：

CssStyleSheet styleSheet = new CssStyleSheet();

但是这给了我警告“类CssStyleSheet没有默认构造函数”

而且：

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

符合“无法使用静态访问”访问“实例成员'createCssStyleSheet'。”

所以我的问题是：如何在Dart中创建CssStyleSheet，以便我可以使用insertRule(rule, index)和deleteRule(index)等方法？

亲切的问候，
亨德里克

Answer 1

我试过了，它对我有用：

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

Answer 2

GünterZöchbauer的答案帮助我找到了解决方案（请参阅我对他的回答的评论）。
这有效：

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

Answer 3

对于需要添加外部样式表的任何人，您都可以这样做。

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

如何使用Dart动态添加样式表？

3 个答案: