js動(dòng)態(tài)添加帶圓圈序號(hào)列表方法

這篇文章給大家分享的是有關(guān)js動(dòng)態(tài)添加帶圓圈序號(hào)列表方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來(lái)看看吧。

1、先在body里面添加ul標(biāo)簽

<!-- 無(wú)序列表 --><ul id="list">
	</ul>

2.通過js獲取到id等于list的標(biāo)簽

如圖的js代碼展示的是前三個(gè)顏色不同，余下的顏色相同的圓圈序號(hào)

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樣式修改

/*設(shè)置列表樣式*/ul{
    list-style-type: none;}

list-style-type: none表示無(wú)標(biāo)識(shí)，屬性也有空心圓、實(shí)心方塊、數(shù)字等

序號(hào)排的整齊需要設(shè)置span的樣式

/*設(shè)置為行內(nèi)塊狀元素*/li span{
	display:inline-block;}

效果如下圖所示

感謝各位的閱讀！關(guān)于“js動(dòng)態(tài)添加帶圓圈序號(hào)列表方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！