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

【问题标题】：How do I dynamically add a stylesheet using Dart?如何使用 Dart 动态添加样式表？
【发布时间】：2014-06-24 19:22:57
【问题描述】：

我知道在 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'”。

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

亲切的问候，
亨德里克

【问题讨论】：

How to create CSS keyframe rule in Dart的可能重复
感谢您的通知。这不是重复的，因为我想动态创建一个新的样式表，而您的链接指向一个问题，其中使用了已经存在的样式表。
好吧，我觉得这没有必要。你可以试试document.head.append(new StyleElement());，然后继续'重复'的例子吗？

标签： dom dart stylesheet dart-html

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

Günter Zö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);
}

【讨论】：

我已经尝试过您的决定 - 由于某些原因，我在头部添加了空的元素。你没有同样的经历吗？

【解决方案3】：

我试过了，它对我有用：

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

【讨论】：

谢谢。您的解决方案有效，但 dom.document.styleSheets[0] 不返回新创建的样式表。我添加了自己的解决方案作为另一个答案。
这很有趣，因为如果没有第一行，当我尝试访问 dom.document.styleSheets[0] 时会收到 RangeError。很高兴你找到了适合你的东西。
也许您在一个空文档中使用了代码，其中唯一的样式表是您动态添加的样式表（如果您删除了第一行，则什么都没有）。我在一个已经加载了几个样式表的文档中使用了它，然后dom.document.styleSheets[0] 返回了第一个已经加载的样式表。
你是对的。当您写道“重复”中的解决方案对您不起作用时，我以为您遇到了相同的 RangeError。感谢您的反馈！