html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码

1.先在body里面添加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 += '

' + i + '' + '
';

}else if (i == 2) {

str += '

' + i + '' + '
';

}else if (i == 3) {

str += '

' + i + '' + '
';

}else{

str += '

' + i + '' + '
';

}

oUl.innerHTML = str;

}

3.css样式修改

/*设置列表样式*/

ul{

list-style-type: none;

}

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

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

/*设置为行内块状元素*/

li span{

display:inline-block;

}

效果如下图所示

到此这篇关于js动态添加带圆圈序号列表的文章就介绍到这了,更多相关js动态添加序号列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码相关推荐

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法
js动态添加带圆圈序号列表方法发布时间:2021-02-19 11:30:34 来源:亿速云阅读:69 作者:小新这篇文章给大家分享的是有关js动态添加带圆圈序号列表方法的内容.小编觉得挺实用的 ...
html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法的精讲
免费学习推荐:js视频教程 1.先在body里面添加ul标签 2.通过js获取到id等于list的标签定义一个空字符串用来连接增加的标签,并展示出来如图的js代码展示的是前三个颜色不同,余下的颜色 ...
js动态添加带圆圈序号列表
1.先在body里面添加ul标签  <ul id="list"></ul> 2.通过js获取到id等于list的标签 ...
使用 EasyExcel 动态添加自增序号列
前言本文将介绍如何通过使用EasyExcel自定义拦截器实现在最终的Excel文件中新增一列自增的序号列,最终的效果如下: 此外,本文所使用的完整代码示例已上传到GitHub. 实现本文主要是通过 ...
python中label函数_python实现在函数图像上添加文字和标注的方法
如下所示: import matplotlib.pyplot as plt import numpy as np from matplotlib import font_manager #先确定字体, ...
JS动态添加div，然后在div中添加元素
先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. <div id="DvelopmentTarget"> </div> 动态往div中添 ...
js生成div后添加html(),JS动态添加div，然后在div中添加元素
先是放一个空的div,让后根据指标的数据,动态的往div中添加元素. 动态往div中添加元素: for (var n = 0; n < data.length; n++) { //获取div v ...
js 动态获取表格中的值并修改其他表格+js 动态拼接字符串
主要是用思路是给表格设置id,取表格tr 的值 $('#'+d+"DataOptions" +" tr").each(function(i){var fie ...
Android动态listview,Android列表组件ListView使用详解之动态加载或修改列表数据
在使用ListView组件来显示列表数据时,有的时候我们需要改变列表中的数据,有以下方法: 1.重新给ListView组件设置适配器这种方法重新创建了ListView,效率不好. 2.使用适配器中的 ...

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码相关推荐

最新文章

热门文章