时间戳

首页 > 解决方案 > 我遇到了`class`和`id`属性的问题。使用`id`和` `代码可以正常工作。但是使用`class`它不起作用

javascript - 我遇到了`class`和`id`属性的问题。使用`id`和` `代码可以正常工作。但是使用`class`它不起作用

问题描述

对于一个网站，我在标签中使用onclick属性。<img>目的是在单击图像时将采取一些操作。比如什么时候image/1.jpg会被点击image/12.jpeg就会消失。当我在 HTML中使用idwith并在 JS 中使用时，它可以正常工作。但是当我在 HTML 中的标签中使用并在JS 中使用时，它不起作用。<img>getElementsByIdclass<img>getElementsByClassName

<body>

    <img class="test1" width="300" height="400" onclick="myFunction()" src="images/1.jpg">
    <img class="test2" width="300" height="400" src="images/12.jpeg">

    <script>
        var img_array = ['images/1.jpg', 'images/12.jpeg'];
        i = 0;

        function myFunction() {
            i++;
            if (i == img_array.length - 1) {
                document.getElementsByClassName("test1").src = img_array[i];
                document.getElementsByClassName("test2").style.opacity = "0";
                document.getElementsByClassName("test2").style.visibility = "hidden";
                i = -1;
            } else {
                document.getElementsByClassName("test1").src = img_array[i];
                document.getElementsByClassName("test2").style.opacity = "1";
                document.getElementsByClassName("test2").style.visibility = "visible";
            }

        }
    </script>
</body>

标签： javascripthtml

解决方案

getElementById 返回一个元素，但 getElementsByClassName 返回一个集合。所以你可以做的是：

document.getElementsByClassName("test1")[0].src
document.getElementsByClassName("test2")[0].style.opacity
document.getElementsByClassName("test2")[0].style.visibility = "hidden";

而且 getElement的ById 也不存在。它应该是 getElementById。意味着没有

推荐阅读