溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這期內容當中小編將會給大家帶來有關使用JavaScript怎么動態添加帶圓圈序號列表，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
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 ><span id="listOne" >' + i + '</span></a></li>' + '<br>';
}else if (i == 2) {
str += '<li><span >' + i + '</span></li>' + '<br>';
}else if (i == 3) {
str += '<li><span >' + i + '</span></li>' + '<br>';
}else{
str += '<li><span >' + i + '</span></li>' + '<br>';
}
}
oUl.innerHTML = str;
}3.css樣式修改
/*設置列表樣式*/
ul{
list-style-type: none;
}list-style-type: none表示無標識，屬性也有空心圓、實心方塊、數字等
序號排的整齊需要設置span的樣式
/*設置為行內塊狀元素*/
li span{
display:inline-block;
}上述就是小編為大家分享的使用JavaScript怎么動態添加帶圓圈序號列表了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
