document.getElementByClassName失效但getElementById可用，如何用类名给多div加边框？

嗨，我来帮你搞定这个问题～你的代码里有几个小错误导致用类名设置边框没生效，我一步步给你拆解：

问题分析 #

1. CSS语法错误：你写的.myDiv样式里，border属性值被错误地加了双引号，而且分号放在了引号内部，这会让CSS解析失败，样式根本不会生效。
2. JavaScript方法错误：document.getElementByClassName是拼写错误，正确的方法名是document.getElementsByClassName（注意是复数的Elements），而且这个方法返回的是一个HTMLCollection元素集合，不能直接给整个集合设置style，必须遍历集合里的每个元素单独设置样式。
3. 额外提醒：其实如果只是给类元素加边框，完全不需要用JavaScript，写对CSS就能实现，这是更简洁的方案。

正确方案一：纯CSS实现（推荐） #

直接修正你的CSS语法错误即可，所有带.myDiv类的div都会自动应用边框样式：

<style type="text/css">
  .myDiv {
    border: thick solid #0000FF; /* 去掉多余的双引号，分号放在属性值外面 */
    /* 可以再加一点margin或者padding让边框效果更明显 */
    margin: 10px;
    padding: 5px;
  }
</style>

<body>
  <div class="myDiv">第一个div</div>
  <div class="myDiv">第二个div</div>
</body>

正确方案二：用JavaScript实现（如果必须用JS的话） #

如果你需要在页面加载时通过JS动态设置，修正方法名并遍历元素集合：

<body onload="myFunction()">
  <div class="myDiv">第一个div</div>
  <div class="myDiv">第二个div</div>

  <script>
    function myFunction() {
      // 正确获取类元素集合
      const divs = document.getElementsByClassName("myDiv");
      // 遍历每个元素单独设置样式
      for (let i = 0; i < divs.length; i++) {
        divs[i].style.border = "thin solid #0000FF";
      }
    }
  </script>

  <style type="text/css">
    /* 这里可以保留基础布局样式，不需要静态边框的话可以去掉border相关 */
    .myDiv {
      margin: 10px;
      padding: 5px;
    }
  </style>
</body>

这样不管是用纯CSS还是JS，都能给所有带myDiv类的div添加上独立的边框啦～

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