ホームページ  >  記事  >  ウェブフロントエンド  >  jsで丸付き連番リストを動的に追加する方法を詳しく解説

jsで丸付き連番リストを動的に追加する方法を詳しく解説

coldplay.xixi
coldplay.xixi転載
2021-02-18 18:04:301970ブラウズ

jsで丸付き連番リストを動的に追加する方法を詳しく解説

無料学習の推奨事項: js ビデオ チュートリアル

# #1. まず本文に ul タグを追加します

<!-- 无序列表 -->

2. js を通じて list と等しい ID を持つタグを取得します

空の文字列を定義します追加したタグを接続して表示するには
図のjsコードは、最初の3つの丸数字が異なる色で示されており、残りの色は同じです

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 style

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

    list-style-type の変更: none はロゴがないことを意味し、属性には白丸、黒四角、数字なども含まれます。

    シリアル番号順に並んでいます スパンスタイルをきれいに設定する必要があります

    /*设置为行内块状元素*/li span{
    	display:inline-block;}
    #効果は下図のようになります


    jsで丸付き連番リストを動的に追加する方法を詳しく解説

    #関連する無料学習の推奨事項:

    javascript(ビデオ)

    以上がjsで丸付き連番リストを動的に追加する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

    声明:
    この記事はcsdn.netで複製されています。侵害がある場合は、admin@php.cn までご連絡ください。