要素の幅に変数を指定したい

Question

要素の幅に変数を指定して自動で可変できるようにしたい。

<li>要素が動的に増えた場合に<ul>要素のwidthを自動で指定するために変数を指定したいです。 そもそも可能なのかも知りたいです。他にやり方があればご教示お願いします。

<ul class="news-tags-list">
<li class="tags-btn">aaa</li>
<li class="tags-btn">aaa</li>
<li class="tags-btn">aaa</li>
</ul>

function linkTagWidthAll (){
  const tagsList = document.querySelector('.news-tags-list');
　const tagsBtns = document.querySelectorAll('.tags-btn');
　let widthAll=0;

　tagsBtns.forEach((e) => {
//幅の値を<li>要素の数だけ追加
　widthAll += e.outerWidth;
　});

//"width:1200px"の部分にwidthAllを入れて、<li>要素が追加された際に自動で長さを調整できるようにしたい
　tagsList.setAttribute('style',"width:1200px");
}

(function(){
  linkTagWidthAll ();
})();

Answer 1

JavaScriptは数値と文字列を即時連結する事が可能です。

tagsList.style.width = widthAll + 'px';

Comments

[Overrun]

ありがとうございます！無事に動くことができました^^