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

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

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

但是当我使用Dart（）尝试同样的方法时，如下所示：

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

CssStyleSheet styleSheet = new CssStyleSheet();

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

我也这样试过：

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

CssStyleSheet styleSheet = new CssStyleSheet();

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

这是：

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

使met“无法使用静态访问访问实例成员'CreateCssTyleSheet'。


所以我的问题是：如何在Dart中创建CssStyleSheet，这样我就可以使用

insertRule（rule，index）

和

deleteRule（index）

亲切的问候，

---

亨德里克

我试过，它对我有效：

将'dart:html'导入为dom；
主要（）{
dom.document.head.append（新的dom.StyleElement（））；
final styleSheet=dom.document.styleSheets[0]作为dom.CssStyleSheet；
最终规则='div{color:blue；}'；
styleSheet.insertRule（规则，0）；
}

甘特·佐克鲍尔的答案帮助我找到了解决办法（见我对他的答案的评论）。
这项工作：

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

---

对于任何需要添加外部样式表的人来说，这就是您的做法

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

---

感谢通知的可能副本。这不是重复的，因为我想动态创建一个新的样式表，而您的链接指向一个问题，即在哪里使用已经存在的样式表。你能试试

document.head.append（newstyleelement（））吗然后继续“重复”的示例？谢谢。您的解决方案可行，但dom.document.styleSheets[0]不会返回新创建的样式表。我添加了我自己的解决方案作为另一个答案。这很有趣，因为如果没有第一行，我在尝试访问
dom.document.styleSheets[0]
时会遇到一个Range错误。很高兴您找到了适合您的东西。可能您在一个空文档中使用了该代码，其中唯一的样式表是动态添加的样式表（如果删除了第一行，则什么也没有）。我在一个已经加载了两个样式表的文档中使用了它，然后
dom.document.stylesheets[0]
返回已经加载的第一个样式表。你说得对。我以为您在编写“duplicate”中的解决方案不适用于您时遇到了相同的Range错误。谢谢你的反馈！我已经试过你的决定了——出于某些原因，我在头部添加了空元素。你不是也有同样的到期日吗？