html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法的精讲

免费学习推荐：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;}

效果如下图所示

相关免费学习推荐：javascript(视频)

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法的精讲相关推荐

html中列表前面的序号带圆圈,js动态添加带圆圈序号列表方法
js动态添加带圆圈序号列表方法发布时间:2021-02-19 11:30:34 来源:亿速云阅读:69 作者:小新这篇文章给大家分享的是有关js动态添加带圆圈序号列表方法的内容.小编觉得挺实用的 ...
html中列表前面的序号带圆圈,js动态添加带圆圈序号列表的实例代码
1.先在body里面添加ul标签 2.通过js获取到id等于list的标签定义一个空字符串用来连接增加的标签,并展示出来如图的js代码展示的是前三个颜色不同,余下的颜色相同的圆圈序号 functi ...
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动态添加带圆圈序号列表方法的精讲相关推荐

最新文章

热门文章