为什么getElementsByClassName()方法无法修改元素样式？

我正在上JavaScript基础课程，但从一开始就跟不上。这门语言对我来说完全无法理解。我能看懂HTML和CSS，但JS对我来说像天书一样。

我尝试通过实践来学习，但连第一行代码都搞不定。我只是想把所有class为"btn"的按钮宽度改为120px，根据我有限的理解，下面的代码应该能生效，但它行不通。我不需要替代方法，我想知道为什么这行不通。

我的代码如下：

HTML代码 #

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Buttons</title>
    <link rel="stylesheet" href="css/style.css">
    <script src = "js/jScript.js"></script>
    
</head>
    
<body>
  
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>
    <p><button type="button" class="btn" ></button></p>

</body>
</html>

CSS代码 #

/* CSS SHEET */
@charset "UTF-8";
.btn{
    width: 10px;
    height: 40px;
    background: gray;
}

JavaScript代码 #

// JAVASCRIPT //

function btnStyle(){
    
    document.getElementsByClassName("btn").style.width="120px";
    
}

1. getElementsByClassName返回的是元素集合，不是单个元素
   document.getElementsByClassName("btn")会返回一个包含所有class为btn的元素的HTMLCollection对象，这个集合本身没有.style属性——只有集合里的每一个单独DOM元素才有.style属性。你直接给集合设置样式，浏览器无法识别，自然不会生效。

2. 函数没有被触发执行
   你定义了btnStyle函数，但没有任何地方调用它（比如没有给按钮加onclick="btnStyle()"，也没有在页面加载时自动执行这个函数），所以哪怕函数逻辑正确，也不会运行。

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