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

我不确定您正在寻找什么，但是这个jsfiddle使用jQuery循环遍历每个列表项并添加相应的css，增量为100％。

http://jsfiddle.net/2ub4hj1o/

这是jquery。

$(document).ready( function() {
$('.items li').each( function(i){
   var child = i + 1;
    var trans = i + "00%";
    var cssval = 'translate3d(0, ' + trans + ', 0)';
    $(this).css('transform',cssval);
});
});

这就是你现在所需的全部内容。

.items li { 
  position: absolute; top: 0; left: 0;
}

<强>更新

如果您还尝试动态添加或删除它们，这里有一个jsfiddle。请注意，我确实删除了translate3d和position：absolute CSS样式，因为如果位置是相对的，则动态添加内容要简单得多。如果您正在寻找不同的东西，请告诉我们。：）

http://jsfiddle.net/2ub4hj1o/1/

Answer 2

您必须获取样式表并向其添加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。

Answer 3

<script>
$(document).ready(function () {
    var li = $(".items li");
    var add = 0;
    for(i = 0;i<li.length;i++){
        $(li[i]).css({"transform":"translate3d(0, "+add+"%, 0)"});
        add +=100;
    }
});
</script>

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

3 个答案: