js動態添加帶圓圈序號列表的實例代碼

Posted on by

1.先在body裡面添加ul標簽

<!-- 無序列表 -->
<ul id="list">
	
</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 += '<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樣式修改

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

list-style-type: none表示無標識，屬性也有空心圓、實心方塊、數字等

序號排的整齊需要設置span的樣式

/*設置為行內塊狀元素*/
li span{
	display:inline-block;
}

效果如下圖所示

在這裡插入圖片描述

到此這篇關於js動態添加帶圓圈序號列表的文章就介紹到這瞭,更多相關js動態添加序號列表內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：