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

coldplay.xixi
リリース: 2021-02-18 18:04:30
転載
1955 人が閲覧しました

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 までご連絡ください。
    最新の問題
    人気のチュートリアル
    詳細>
    最新のダウンロード
    詳細>
    ウェブエフェクト
    公式サイト
    サイト素材
    フロントエンドテンプレート
    私たちについて 免責事項 Sitemap
    PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!