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

Getting and Setting the width of an element with Javascript

本文关键字：元素 设置 Javascript 获取 使用      更新时间：2023-09-26

我有一个 ul list 元素，它的宽度随其中的文本而变化，会定期变化。现在我想将 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...

谢谢！

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

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

那应该行得通..并确保在加载 JavaScript 之前创建元素，否则它将抛出错误，它找不到 null 的样式属性

相关文章：