以编程方式添加第 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

<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>

Answer 2

我不确定你在找什么，但是这个 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);
});
});

这就是您现在 CSS 所需要的。

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

更新

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

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

Answer 3

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

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

Add a nth-child style programmatically

html

javascript

dart