9.排他思想

最新推荐文章于 2022-10-13 10:58:46 发布

relief�

最新推荐文章于 2022-10-13 10:58:46 发布

阅读量107

点赞数

分类专栏：前端学习文章标签： js

本文链接：https://blog.csdn.net/weixin_44406282/article/details/109402598

版权

前端学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

1.所有元素全部清除样式
2.给当前元素设置样式
p:顺序不能颠倒

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0"
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
</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(){
                //先把所有颜色的背景颜色去掉
                for(var i=0;i<btns.length;i++) {
                btns[i].style.backgroundColor='';
                }
                //然后再让当前背景颜色为pink
                    this.style.backgroundColor='pink';
                }      
            }
  </script> 
</body>
</html>