js动态添加带圆圈序号列表

1.先在body里面添加ul标签

<!-- 无序列表 -->
<ul id="list"></ul>

2.通过js获取到id等于list的标签

定义一个空字符串用来连接增加的标签，并展示出来

如图的js代码展示的是前三个颜色不同，余下的颜色相同的圆圈序号

function autoAddList(){var oUl = document.getElementById('list');// var arr = ['湖南','广西','新疆','上海']var str = "";for (let i = 1; i < 13; i++) {if (i == 1) {str += '<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';}else if (i == 2) {str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';}else if (i == 3) {str += '<li><span style="background-color: green">' + i + '</span></li>' + '<br>';}else{str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';}        }oUl.innerHTML = str;
}

3.css样式修改

/*设置列表样式*/
ul{list-style-type: none;
}

list-style-type: none表示无标识，属性也有空心圆、实心方块、数字等

序号排的整齐需要设置span的样式

/*设置为行内块状元素*/
li span{display:inline-block;
}

效果如下图所示

js动态添加带圆圈序号列表相关推荐

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法
js动态添加带圆圈序号列表方法发布时间:2021-02-19 11:30:34 来源:亿速云阅读:69 作者:小新这篇文章给大家分享的是有关js动态添加带圆圈序号列表方法的内容.小编觉得挺实用的 ...
html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码
1.先在body里面添加ul标签 2.通过js获取到id等于list的标签定义一个空字符串用来连接增加的标签,并展示出来如图的js代码展示的是前三个颜色不同,余下的颜色相同的圆圈序号 functi ...
html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法的精讲
免费学习推荐:js视频教程 1.先在body里面添加ul标签 2.通过js获取到id等于list的标签定义一个空字符串用来连接增加的标签,并展示出来如图的js代码展示的是前三个颜色不同,余下的颜色 ...
使用 EasyExcel 动态添加自增序号列
前言本文将介绍如何通过使用EasyExcel自定义拦截器实现在最终的Excel文件中新增一列自增的序号列,最终的效果如下: 此外,本文所使用的完整代码示例已上传到GitHub. 实现本文主要是通过 ...
js 动态添加 tabel 表格
js 动态添加 tabel 表格代码 <!DOCTYPE html> <html><head><title> new document </t ...
【原生js】js动态添加dom，如何绑定事件
首先要明白浏览器在加载页面的时候是按顺序来加载的,这样以来就很清楚了,js动态添加dom以后,这些dom并没有绑定事件,这个时候最简单的一个办法就是:将绑定事件的方法封装到一个函数A中,在动态添加完d ...
原生js动态为table追加html,JS动态添加Table的TR，TD实现方法
本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: var tempRow=0; var maxRows=0; function insertRows( ...
form表单无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
MUI 里js动态添加数字输入框后，增加、减少按钮无效
https://www.cnblogs.com/ssjf/p/10193652.html numbox 的自动初化是在 mui.ready 时完成的 mui 页面默认会自动初始化页面中的所有数字输入框 ...

js动态添加带圆圈序号列表

1.先在body里面添加ul标签

2.通过js获取到id等于list的标签

定义一个空字符串用来连接增加的标签，并展示出来

3.css样式修改

js动态添加带圆圈序号列表相关推荐

最新文章

热门文章