1.先在body里面添加ul標(biāo)簽
|
1
2
3
4
|
<!-- 無序列表 --><ul id="list"> </ul> |
2.通過js獲取到id等于list的標(biāo)簽 定義一個(gè)空字符串用來連接增加的標(biāo)簽，并展示出來
如圖的js代碼展示的是前三個(gè)顏色不同，余下的顏色相同的圓圈序號
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
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樣式修改
|
1
2
3
4
|
/*設(shè)置列表樣式*/ul{ list-style-type: none;} |
list-style-type: none表示無標(biāo)識，屬性也有空心圓、實(shí)心方塊、數(shù)字等
序號排的整齊需要設(shè)置span的樣式
|
1
2
3
4
|
/*設(shè)置為行內(nèi)塊狀元素*/li span{ display:inline-block;} |
效果如下圖所示
到此這篇關(guān)于js動態(tài)添加帶圓圈序號列表的文章就介紹到這了,更多相關(guān)js動態(tài)添加序號列表內(nèi)容請搜索服務(wù)器之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持服務(wù)器之家！
原文鏈接：https://blog.csdn.net/HouRuoTong/article/details/113822620
