如何使用getElementsByClassName方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。

最新推荐文章于 2024-06-14 15:02:13 发布

小猪佩琪_吼

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量676

点赞数 26

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/emmmaha/article/details/139114926

版权

使用getElementsByClassName方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <style>
        .selected {
            color: red;
        }
    </style>
</head>
<body>
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>

    <script>
        // 获取所有class为box的元素
        var boxes = document.getElementsByClassName('box');

        // 遍历所有box元素，为每个添加点击事件监听器
        for(var i = 0; i < boxes.length; i++) {
            boxes[i].addEventListener('click', function() {
                // 移除所有元素的selected类名
                for(var j = 0; j < boxes.length; j++) {
                    boxes[j].classList.remove('selected');
                }
                
                // 为当前点击的元素添加selected类名
                this.classList.add('selected');
            });
        }
    </script>
</body>
</html>

在上面的示例中，我们首先定义了样式，当一个元素具有.selected类名时，文字颜色为红色。然后通过document.getElementsByClassName('box')获取所有class为box的元素，在每个元素上添加点击事件监听器。当点击某个元素时，会移除所有box元素的selected类名，然后为被点击的元素添加selected类名，从而改变其样式。

通过这种方法，您可以实现对点击选中的区域添加新类名的效果。

小猪佩琪_吼

关注

26
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何使用getElementsByClassName方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。

方法结合事件监听器，在HTML中实现对点击选中区域赋予新类名的功能。的元素，在每个元素上添加点击事件监听器。当点击某个元素时，会移除所有box元素的。通过这种方法，您可以实现对点击选中的区域添加新类名的效果。在上面的示例中，我们首先定义了样式，当一个元素具有。类名时，文字颜色为红色。类名，然后为被点击的元素添加。类名，从而改变其样式。获取所有class为。
复制链接

扫一扫