首頁  >  文章  >  web前端  >  js動態添加帶有圓圈序號列表方法的精講

js動態添加帶有圓圈序號列表方法的精講

coldplay.xixi
coldplay.xixi轉載
2021-02-18 18:04:301983瀏覽

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;}

    #效果如下圖所示
    js動態添加帶有圓圈序號列表方法的精講

    相關免費學習推薦: javascript(影片)

    #

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

    陳述:
    本文轉載於:csdn.net。如有侵權,請聯絡admin@php.cn刪除