Javascriptで現在時刻を設定して出力しましたが。。

/* 時間 */
mydate=new Date();
Ye=mydate.getFullYear()+".";
Mo=mydate.getMonth()+1+".";
Da=mydate.getDate()+".";
Day=mydate.getDay();
Day2=new Array(7);
Day2[0]="日";Day2[1]="月";Day2[2]="火";
Day2[3]="水";Day2[4]="木";Day2[5]="金";
Day2[6]="土";


document.write(Ye+Mo+Da+"（"+Day2[Day]+"）");


こちらのJSなのですが
Day2（曜日）の部分の文字色と背景を設定し、四方に丸みをつけたいのですが
どうすればよろしいですか？ご存じの方お願いいたします。

No.3 回答者： yambejp 回答日時： 2021/09/24 13:06

<div id="hoge"></div>

<script>
const mydate=new Date();
let Y,M,D;
[Y,M,D]=mydate.toLocaleDateString().split("/");
const Day=["日","月","火","水","木","金","土"][mydate.getDay()];
hoge.innerHTML=`${Y}.${M}.${D} <span style="display:inline-block;background-Color:blue;color:yellow;border-radius:5px;">（${Day}）</span>`;
</script>

No.2 回答者： Ogre7077 回答日時： 2021/09/22 21:25

Day2 を <span> で囲む

span に style 属性を付ける

参考)
https://developer.mozilla.org/ja/docs/Web/CSS/co …
https://developer.mozilla.org/ja/docs/Web/CSS/ba …
https://developer.mozilla.org/ja/docs/Web/CSS/bo …

できれば

document.write(値) をやめて、
document.getElementById("親要素名").innerHTML = 値 にする

No.1 回答者： fujillin 回答日時： 2021/09/22 21:16

こんばんは

スクリプトというよりもCSSの質問ですね。

修飾したい部分だけテキストを分けて、例えば
　2021.9.22.<span class="weekday">水</span>
などのようにしておいて、CSSあるいはスクリプトからスタイルを設定すれば宜しいかと。

例えば、
.weekday{
display: inline-block;
width: 1.4em; height: 1.4em;
text-align: center;
background-color: cyan;
border-radius: 50%;
}
とか。