无法通过JavaScript设置元素宽度问题求助

你的问题出在document.getElementsByClassName("bar")的返回值上——它返回的是HTMLCollection（DOM元素集合），不是单个元素，所以直接调用.style.width不会生效。

修正方案 #

1. 获取单个.bar元素并设置宽度

如果页面中只有一个.bar元素，有两种简单写法：

• 从集合中取第一个元素：

document.getElementsByClassName("bar")[0].style.width = "50px";

• 用querySelector直接获取匹配的第一个元素（推荐，写法更简洁）：

document.querySelector(".bar").style.width = "50px";

2. 确保代码在DOM加载完成后执行

如果你的JS代码写在<head>标签内，可能会因为DOM还未渲染完成而找不到元素。可以把脚本放在</body>标签前，或者用DOM加载完成事件包裹代码：

document.addEventListener('DOMContentLoaded', function() {
  document.querySelector(".bar").style.width = "50px";
});

3. 批量设置多个.bar元素的宽度

如果页面中有多个.bar元素，需要遍历集合逐个设置：

const barElements = document.getElementsByClassName("bar");
for (let i = 0; i < barElements.length; i++) {
  barElements[i].style.width = "50px";
}

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