javascript - 以编程方式添加第 n 个子样式

Question

我想遵循 this blog 中规定的模式它使用以下 css 规则来指定项目应出现的位置:

.items li { 
  position: absolute; top: 0; left: 0;
}
.items li:nth-child(1)  { transform: translate3d(0, 0%, 0); }
.items li:nth-child(2)  { transform: translate3d(0, 100%, 0); }
.items li:nth-child(3)  { transform: translate3d(0, 200%, 0); }

但是，我不知道列表中会有多少项，所以我宁愿不像上面那样硬编码 30 行，而是限制为 30 个列表项。相反，我想在每次添加项目时添加样式规则，这意味着我可以拥有无​​限数量的列表项目。

我尝试了各种方法，但无法弄清楚如何以编程方式动态添加此类样式规则。任何帮助将非常感激。我正在用 Dart 编写应用程序，但同样欢迎使用 Javascript 解决方案。

更新

请参阅下文，了解使我走上正轨的已接受答案。它使用 jquery，所以我在下面为像我这样使用 Dart 的人提供了一个版本。 Dart 版本使用 How do I dynamically add a stylesheet using Dart?这是我刚刚发现的——我不知道我之前是怎么错过的。感谢大家的帮助。

import 'dart:html' as Html;
void main(){
  Html.StyleElement styleElement = new Html.StyleElement();
  Html.document.head.append(styleElement);
  Html.CssStyleSheet sheet = styleElement.sheet;
  final rule = 'div { border: 1px solid red; }';
  sheet.insertRule(rule, 0);
}

Answer 1

您必须获得样式表并向其添加 CSS 规则。

addChild = function(i) {
  var styleSheet = document.styleSheets[0];
  var rule = '.items li:nth-child(' + i + ')  { transform: translate3d(0, ' + (i*100) + '%, 0); }';
  styleSheet.insertRule(rule, 1);
}

这会将 CSS 规则添加到样式表数组中找到的第一个样式表，并将该规则添加到样式表的开头。您还可以寻找另一个样式表或创建一个新样式表。

有关更多信息，请查看 here .