js特性——点击设置样式，再次点击取消样式

最新推荐文章于 2021-10-15 16:30:45 发布

weixin_47204963

最新推荐文章于 2021-10-15 16:30:45 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/weixin_47204963/article/details/113103839

版权

点击添加样式，再次点击取消样式思路整理
1.获取元素集合
2.给元素集合绑定事件
3.事件的回调函数里面通过ele.style判断是否是选中状态

//点击设置样式，再次点击取消样式

<style>
        .wrapper {
            padding: 20px;
            width: 800px;
            text-align: center;
            border: 2px solid #999;
        }
        .wrapper .item {
            display: inline-block;
            margin: 20px;
            box-sizing: border-box;
            padding: 10px;
            width: 120px;
            height: 120px;
           
            border: 2px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="item">100</div>
        <div class="item">200</div>
        <div class="item">300</div>
        <div class="item">400</div>
        <div class="item">500</div>
        <div class="item">600</div>
        <div class="item">700</div>
    </div>

    <script>
        (function(){
            // 获取所有 item 的集合
            var itemNodes = document.querySelectorAll('.wrapper .item');

            // 遍历
            itemNodes.forEach(function(item){
                // 给每个 item  添加 单击事件
                item.onclick = function(){
                    // 判断当前的 item，是否被选中
                    if (item.style.borderColor === 'red') {
                        // 如果当前是选中，取消选中
                        // item.style.borderColor = '#ccc';
                        item.style.borderColor = '';  // 给 borderColor 设置了一个无效的值
                    } else {
                        // else if(item.style.borderColor === '#ccc') 由于ele.style.attr只能获取行内样式，而设置的是设置在内联样式的，因此不能读取
                        // 如果当前没有选中，选中！
                        item.style.borderColor = 'red';
                    }
                }
            });
        })(）
	</script>

在这里插入图片描述

weixin_47204963

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
js特性——点击设置样式，再次点击取消样式

点击添加样式，再次点击取消样式思路整理1.获取元素集合2.给元素集合绑定事件3.事件的回调函数里面通过ele.style判断是否是选中状态//点击设置样式，再次点击取消样式<style> .wrapper { padding: 20px; width: 800px; text-align: center; border: 2px solid #999; }
复制链接

扫一扫