在 getElementsByClassName 时滚动 javascript 不工作

Question

我正在使用以下 js 代码在滚动条上旋转各种元素。只要我 getElementById，它就可以正常工作。但是，我想旋转一张没有 ID 的图像。相反，它有几个类。当然，我将 getElementById 替换为 getElementsByClassName。问题是每当我这样做时，代码都不起作用。

这是工作代码：

<img src="url" id="logo">

<script>
var example = document.getElementById("logo");
window.addEventListener("scroll", function() {
    example.style.transform = "rotate("+window.pageYOffset/10+"deg)";
});
</script>

这是无效代码：

<img src="url" class="circle">

<script>
var example = document.getElementsByClassName("circle");
window.addEventListener("scroll", function() {
    example.style.transform = "rotate("+window.pageYOffset/10+"deg)";
});
</script>

P.S。我无权访问 HTML.

Answer 1

查看文档，您可以在 Document.getElementById return an Element calls to the Document.getElementsByClassName method return an HtmlCollection 收集时检查。然后，您可以 select 集合的第一个元素，如果它是您正在寻找的元素：

var example = document.getElementsByClassName("circle")[0];

Answer 2

问题出在那行：

var example = document.getElementsByClassName("circle");

函数名为getElementsByClassName return一个数组，可以是一个元素但是在数组中，不像getElementById直接传递元素，在那种情况下，我假设，圆圈class就是你要获取的第一个元素，进行下一步：

var example = document.getElementsByClassName("circle")[0];

该函数的更多信息：

https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByClassName

在 getElementsByClassName 时滚动 javascript 不工作

Rotate on scroll javascript not working when getElementsByClassName

javascript

scroll

rotation

getelementbyid

getelementsbyclassname