点击按钮调用getElementsByClassName修改container的display属性不生效

问题根源 #

document.getElementsByClassName() 方法返回的是包含所有匹配指定类名元素的类数组HTMLCollection集合，并非单个DOM元素，直接对集合对象设置.style属性是无效的，浏览器控制台通常会抛出相关undefined报错。

修复方案 #

方案1（适配单container元素场景） #

直接取集合的第一个元素操作即可，修改startStop函数里对应的代码行：

// 修改前
document.getElementsByClassName('container').style.display='block';
// 修改后
document.getElementsByClassName('container')[0].style.display='block';

方案2（更简洁的写法） #

使用querySelector直接获取单个匹配元素：

document.querySelector('.container').style.display = 'block';

方案3（如果页面有多个container元素需要统一操作） #

遍历所有匹配元素逐一设置：

document.querySelectorAll('.container').forEach(item => {
  item.style.display = 'block';
})

额外排查点 #

如果修改后仍未生效，可打开浏览器开发者工具的控制台检查：

• 选择器是否匹配到了元素，有没有出现Cannot read properties of null/undefined报错
• 对应的container元素是否存在其他更高优先级的CSS规则覆盖了display属性设置

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