如何解决当 getElementsByClassName 时,在滚动时旋转 javascript 不起作用
我正在使用以下 js 代码在滚动时旋转各种元素。只要我getElementById,它就可以正常工作。但是,我想旋转一张没有 ID 的图像。相反,它有几个类。当然,我用 getElementsByClassName 替换了 getElementById。问题是每当我这样做时,代码都不起作用。
这是工作代码:
<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>
附言我无权访问 HTML。
解决方法
查看文档,您可以检查当 Document.getElementById
返回一个 Element
时,对 Document.getElementsByClassName
方法的调用返回一个 HtmlCollection
集合。然后,您可以选择集合的第一个元素(如果它是您要查找的元素):
var example = document.getElementsByClassName("circle")[0];
,
问题就在那条线上:
var example = document.getElementsByClassName("circle");
名为 getElementsByClassName
的函数返回一个数组,可以是一个元素但在数组中,不像 getElementById
直接传递元素,在这种情况下,我假设,圆类是您想要获取的第一个元素,请执行下一个:
var example = document.getElementsByClassName("circle")[0];
该函数的更多信息:
https://developer.mozilla.org/es/docs/Web/API/Document/getElementsByClassName
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。