children.clientWidth取值异常：未从目标li元素获取正确宽度

嘿，这个问题我之前碰到过好几次，大概率是样式加载时机或者元素布局的问题，咱们一步步来排查和解决：

最可能的原因1：li元素的布局样式导致宽度撑满父容器 #

如果你的<li>默认是display: block（没设置成横向排列的样式），它会直接撑满父容器<ul>的宽度。要是<ul>的宽度刚好接近窗口宽度，那拿到的clientWidth自然就是窗口级别的数值了。

解决办法：
检查你的CSS，给li设置合适的display属性，比如横向排列常用的：

#tabname li {
  display: inline-block; /* 或者用flex布局也可以 */
  /* 其他样式比如padding、margin按需添加 */
}

原因2：DOM加载完成但样式还没加载 #

你用$(function())触发方法，这个时机只是DOM结构加载完毕，但CSS文件如果加载滞后，或者页面有异步加载的样式，元素还没应用最终样式，就会导致宽度计算错误。

解决办法：
把方法触发时机改成等待所有资源（包括样式、图片）加载完成的window.onload：

window.onload = function() {
  adjustTabs();
};

如果用jQuery的话（3.0+版本），可以这么写：

$(window).on('load', function() {
  adjustTabs();
});

原因3：换个方式获取li元素试试 #

虽然你说myUl.children[i]是正确的li，但有时候children返回的HTMLCollection可能有隐性问题，换成querySelectorAll来精准获取所有li元素：

function adjustTabs() {
  const lis = document.querySelectorAll("#tabname li");
  for (let i = 0; i < lis.length; i++) {
    console.log(i);
    console.log(lis[i]);
    console.log('width', lis[i].clientWidth);
  }
};

（这里顺便把var换成let，避免循环里的变量提升问题，虽然你之前的console.log(i)是对的，但好习惯还是要养成~）

调试小技巧：打印计算后的样式 #

如果还是搞不清问题，可以在代码里加一行，打印浏览器计算后的元素宽度，和clientWidth对比：

console.log('computed width', getComputedStyle(myUl.children[i]).width);

要是这个值是你预期的138，但clientWidth还是1500，那说明元素实际渲染的宽度确实是1500，可能是你的CSS里有继承或者优先级的问题，得仔细检查样式表。

内容的提问来源于stack exchange，提问作者BernardA