操作元素排他算法以及三个实用的例子

最新推荐文章于 2022-08-22 19:08:14 发布

懒得一批s

最新推荐文章于 2022-08-22 19:08:14 发布

阅读量832

点赞数 1

分类专栏： JavaScript 文章标签：算法

本文链接：https://blog.csdn.net/weixin_44797717/article/details/103174872

版权

操作元素排他算法如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:1.所有元素全部清除样式(干掉其他人)2.给当前元素设置样式( 留下我自己)3.注意顺序不能颠倒,首先干掉其他人,再设置自己例子点击按钮按钮背景颜色改变再次点击其他的再次改变并且之前点击的按钮变回原来的颜色 var btns = document.getElementsByTag...

摘要由CSDN通过智能技术生成

操作元素

排他算法

如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:
1.所有元素全部清除样式(干掉其他人)
2.给当前元素设置样式( 留下我自己)
3.注意顺序不能颠倒,首先干掉其他人,再设置自己

例子
点击按钮按钮背景颜色改变再次点击其他的再次改变并且之前点击的按钮变回原来的颜色

 var btns = document.getElementsByTagName('button');
        for (var i = 0;i < btns.length; i++){
      
            btns[i].onclick = function(){
    
            	//取消掉全部按钮的颜色
                for (var i =0;i<btns.length;i++){
   
                    btns[i].style.backgroundColor = '';
                } 
                //设置被点击的按钮颜色
                this.style.backgroundColor = '#666666';
            }
        }

实现效果

在这里插入图片描述
点击5

在这里插入图片描述
再次点击4

在这里插入图片描述

再来三个个实用的例子全选按钮 -换肤- 表格隔行变色
全选按钮
实现效果点击全选按钮下面全部选中当下面的全部选中时全选框自动选中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table,td{
   
            border: 1px solid pink;
            border-collapse: collapse;
        }
       
    </style>
</head>
<body>
    <table>
        <thead>
                <td>
                    <input type="checkbox"  id="j_qx">
                </td>
                <td>
                    商品
                </td>
        </thead>
        <tbody id="j_sp" >
            <tr>
                <

最低0.47元/天解锁文章

懒得一批s

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
操作元素排他算法以及三个实用的例子

操作元素排他算法如果有同一组元素,我们想要某一个元素实现某种样式 ,需要用到循环的排他思想算法:1.所有元素全部清除样式(干掉其他人)2.给当前元素设置样式( 留下我自己)3.注意顺序不能颠倒,首先干掉其他人,再设置自己例子点击按钮按钮背景颜色改变再次点击其他的再次改变并且之前点击的按钮变回原来的颜色 var btns = document.getElementsByTag...
复制链接

扫一扫

专栏目录