jsダイナミックに丸付き番号リストのインスタンスコードを追加します。
1.まずbodyにulラベルを追加します。
図のjsコードのように前の3つの色が違っています。残りの色は同じ丸番号です。
番号順の並びが整いますので、spanのスタイルを設定してください。
ここでは、jsダイナミックにサークル番号付きリストを追加した文章を紹介します。もっと関連するjsダイナミックにシリアルナンバーリストの内容を追加します。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。
<!-- -->
<ul id="list">
</ul>
2.jsによってIDがリストに等しいラベルを取得して、空の文字列を定義して、追加のラベルを接続して表示します。図のjsコードのように前の3つの色が違っています。残りの色は同じ丸番号です。
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スタイルの変更
/* */
ul{
list-style-type: none;
}
list-style-type:noneは標識がないことを表して、属性も中空の円、固体の四角形、数字などがあります。番号順の並びが整いますので、spanのスタイルを設定してください。
/* */
li span{
display:inline-block;
}
効果は下図の通りです。ここでは、jsダイナミックにサークル番号付きリストを追加した文章を紹介します。もっと関連するjsダイナミックにシリアルナンバーリストの内容を追加します。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。