I have a unique situation where I need to dynamically adjust the width of a ul list element based on the text content inside it. Specifically, I want the width of the ul list to be equal to the width of the first list item, which can change frequently. My goal is to retrieve the width of the first list item (#item1) and then apply that same width to the entire ul list (#myList). Despite my efforts with the following code snippet, I have not been successful:
<script type="text/javascript">
var width = document.getElementById('item1').offsetWidth;
document.getElementById('myList').style.width = width;
</script>
Here is the HTML structure:
<ul id="myList">
<li id="item1">text1</li>
<li>text2</li>
<li>text3</li>
</ul>
If anyone has any suggestions or solutions that do not involve using jQuery, but rather pure JavaScript, I would greatly appreciate it!
Thank you in advance!