js学习笔记-排他思想（算法）

最新推荐文章于 2024-04-28 16:42:51 发布

过客701

最新推荐文章于 2024-04-28 16:42:51 发布

阅读量147

点赞数

文章标签： javascript 学习 elementui

本文链接：https://blog.csdn.net/weixin_63096198/article/details/123464067

版权

以切换按钮为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
   <button>按钮1</button>
   <button>按钮2</button>
   <button>按钮3</button>
   <button>按钮4</button>
   <button>按钮5</button>
   <script>
      //获取元素
       var btns=document.getElementsByTagName('button');
       for(var i=0;i<btns.length;i++){
        btns[i].onclick=function(){
           //使btns数组的背景颜色都为空
           for(var i=0;i<btns.length;i++){
            btns[i].style.backgroundColor='';
           }
           //定义点击事件的背景颜色
           this.style.backgroundColor='red';
       }
    }
   </script>
</body>
</html>

排他思想主要运用双重for循环来实现

书写过程中应注意单词的拼写，如color不能写成colour；每句结尾应书写正确的英文分号。

点击对象的属性用this代替是为了避免和第二个for循环中的重复。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

过客701

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记-排他思想（算法）

以切换按钮为例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <ti
复制链接

扫一扫