要素の幅に変数を指定して自動で可変できるようにしたい。
<li>要素が動的に増えた場合に<ul>要素のwidthを自動で指定するために変数を指定したいです。 そもそも可能なのかも知りたいです。他にやり方があればご教示お願いします。HTML
1<ul class="news-tags-list"> 2<li class="tags-btn">aaa</li> 3<li class="tags-btn">aaa</li> 4<li class="tags-btn">aaa</li> 5</ul>
JavaScript
1function linkTagWidthAll (){ 2 const tagsList = document.querySelector('.news-tags-list'); 3 const tagsBtns = document.querySelectorAll('.tags-btn'); 4 let widthAll=0; 5 6 tagsBtns.forEach((e) => { 7//幅の値を<li>要素の数だけ追加 8 widthAll += e.outerWidth; 9 }); 10 11//"width:1200px"の部分にwidthAllを入れて、<li>要素が追加された際に自動で長さを調整できるようにしたい 12 tagsList.setAttribute('style',"width:1200px"); 13} 14 15(function(){ 16 linkTagWidthAll (); 17})();
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/11/04 10:34