彩色圆圈序号列表怎样用js达成
发布时间：2022-04-07 15:59:56 所属栏目：语言 来源：互联网
导读：我们经常能在一些网站页面上看到圆圈序号列表，也就是带圆圈的需要，这样的序号列表能增加网页的美观性，那么圆圈序号列表怎样用js实现呢？下面就给大家分享一个JS实现彩色圆圈序号列表的实例。 1.先在body里面添加ul标签 !-- 无序列表 -- ul id=list /ul 2.
|
我们经常能在一些网站页面上看到圆圈序号列表，也就是带圆圈的需要，这样的序号列表能增加网页的美观性，那么圆圈序号列表怎样用js实现呢？下面就给大家分享一个JS实现彩色圆圈序号列表的实例。 1.先在body里面添加ul标签 <!-- 无序列表 --> <ul id="list"> </ul> 2.通过js获取到id等于list的标签 定义一个空字符串用来连接增加的标签，并展示出来 我们想要的效果是前三个颜色不同，余下的颜色相同的圆圈序号，以下是实现代码 function autoAddList(){ var oUl = document.getElementById('list'); // var arr = ['湖南','广西','新疆','上海'] var str = ""; for (let i = 1; i < 13; i++) {  list-style-type: none表示无标识，属性也有空心圆、实心方块、数字等 序号排的整齐需要设置span的样式 /*设置为行内块状元素*/ li span{ display:inline-block; } 以上就是JS实现彩色圆圈序号列表的实例分享，文本实现代码具有一定的参考价值，需要的朋友可以参考，希望对大家学习和工作有帮助，更多使用JS技巧可以关注其他文章。 （编辑：常州站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
