使用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的style属性