javascript - 使用 Javascript 获取和设置元素的宽度

Question

我有一个 ul 列表元素，其宽度随其中的文本而变化，并且会定期变化。现在我想将 ul 列表的宽度设置为第一个列表元素的宽度，这是可以更改的文本。我想“获取”第一个列表项（#item1）的宽度，并将 ul 列表（#myList）的宽度“设置”为刚才提到的第一个列表项的宽度。我尝试了以下代码，但它不起作用：

<script type="text/javascript">
  var width = document.getElementById('item1').offsetWidth;
  document.getElementById('myList').style.width = width;
</script> 

HTML：

<ul id="myList">
  <li id="item1">text1</li>
  <li>text2</li>
  <li>text3</li>
</ul>

有什么建议么？我宁愿不使用 jquery，而是使用纯 javascript ...

谢谢！

Answer 1

使用这个..在这里我假设 ul 元素是#ul 并且列表元素是#list

 var liWidth=document.querySelector('#list').clientWidth;

 // make the width of ul same
 document.querySelector('#ul').style.width=liWidth+'px';

那应该可以工作..并确保在加载 JavaScript 之前创建元素，否则它会抛出错误，它找不到 null 的样式属性