我想使用jQuery在“.demo:before”上设置CSS counter-increment属性.
问题是jQuery无法访问伪元素.另一个S.O.回答(我现在似乎无法找到)建议设置数据属性,然后在CSS中使用该值,但这也不起作用.这是可以实现的吗?
简化示例:http://jsfiddle.net/4h7hk8td/
HTML:
<ul class="demo"> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>
JS:
// 1) User Sets Unit Size var myUnit = 100; // 2) Unit size is saved via data attribute $('.demo li').attr('data-unit',myUnit);
CSS:
.demo { counter-reset: list; } .demo li:before { /* 3) CSS gets data attribute and applies as the increment. Not working :( */ counter-increment: list attr(data-unit); content: counter(list); }
解决方法
增加每个li的计数器而不是:之前:
http://jsfiddle.net/7vt0kf2c/.
var myUnit = 100; $(".demo li").css("counter-increment","list " + myUnit); $("button").click(function(e) { $(".demo li").css("counter-increment","list " + 200); });
原文地址:https://www.jb51.cc/jquery/156847.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。