点击按钮效果（button）1.去掉边框效果2.设置简单的for循环按钮可变不同颜色（未实现再次点击取消效果）

86 阅读 0 评论 57 点赞

我是靠谱客的博主矮小火车，最近开发中收集的这篇文章主要介绍点击按钮效果（button）1.去掉边框效果2.设置简单的for循环按钮可变不同颜色（未实现再次点击取消效果），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1.去掉边框效果

border:none;

<html lang="en">
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <style>
            .btn{border: none;}
        </style>
    </head>
    <body>
        <button class="btn">helllo</button>
    </body>
</html>

效果：
前
在这里插入图片描述
后

2.设置简单的for循环按钮可变不同颜色（未实现再次点击取消效果）

<html lang="en">
    <head>
        <script type="text/javascript" src="/jquery/jquery.js"></script>
        <style>
            .btn{border: none;background-color: #d49797;}
        </style>
    </head>
    <body>
        <button class="btn">helllo1</button>
        <button class="btn">helllo2</button>
        <button class="btn">helllo3</button>
        <script>
          btns=document.querySelectorAll(".btn");
          for(let index=0;index<btns.length;index++){
              const btn=btns[index];
              btn.onclick=()=>{
                  btn.style.backgroundColor="red";
              }
          }
        </script>
    </body>
</html>

初始效果：
在这里插入图片描述
点击后：