使用getElementsByClassName实现滚动时元素旋转的JavaScript代码失效问题求助

嗨，这问题我熟！你遇到的问题核心是getElementsByClassName和getElementById的返回值类型不一样，咱一步步来解决：

getElementById() 会直接返回单个匹配的DOM元素，所以你能直接调用它的.style属性修改样式；但 getElementsByClassName() 返回的是一个HTMLCollection（类数组对象）——它包含了所有拥有该类名的元素，你不能直接对整个集合使用.style，必须先定位到具体的元素。

方案1：直接取集合中的第一个元素（适合仅有一个目标元素的场景） #

因为你明确只有一张图片需要旋转，直接通过索引[0]取出集合里的第一个元素即可：

<img src="url" class="circle">
<script>
// 获取类名为circle的元素集合，取第一个元素
var example = document.getElementsByClassName("circle")[0];
window.addEventListener("scroll", function() {
 example.style.transform = "rotate("+window.pageYOffset/10+"deg)";
});
</script>

方案2：用querySelector更简洁直观 #

querySelector() 可以通过CSS选择器语法直接选中单个元素（返回第一个匹配项），写起来更清爽：

<img src="url" class="circle">
<script>
// 用类选择器语法选中第一个匹配的元素
var example = document.querySelector(".circle");
window.addEventListener("scroll", function() {
 example.style.transform = "rotate("+window.pageYOffset/10+"deg)";
});
</script>

额外扩展：如果需要给多个同class元素加效果 #

万一以后要给所有类名为circle的元素都加滚动旋转效果，可以遍历集合：

<script>
var examples = document.getElementsByClassName("circle");
window.addEventListener("scroll", function() {
 var rotateDegree = window.pageYOffset/10 + "deg";
 // 遍历所有匹配元素，逐个设置样式
 for (let i = 0; i < examples.length; i++) {
  examples[i].style.transform = `rotate(${rotateDegree})`;
 }
});
</script>

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