欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js動(dòng)態(tài)添加帶圓圈序號(hào)列表的實(shí)例代碼

 更新時(shí)間：2021年02月18日 11:11:01   作者：一晃的春夏秋冬  
這篇文章主要介紹了js動(dòng)態(tài)添加帶圓圈序號(hào)列表的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

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

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

2.通過(guò)js獲取到id等于list的標(biāo)簽 定義一個(gè)空字符串用來(lái)連接增加的標(biāo)簽，并展示出來(lái)

如圖的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)列表的文章就介紹到這了,更多相關(guān)js動(dòng)態(tài)添加序號(hào)列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論