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 <a><span>' + i + '</span></a>' + '<br>';
        }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（影片）

#

以上是js動態添加帶有圓圈序號列表方法的精講的詳細內容。更多資訊請關注PHP中文網其他相關文章！