原生js实现按钮改变颜色其他颜色不变的操作

最新推荐文章于 2023-04-14 10:43:15 发布

伤感的痛楚

最新推荐文章于 2023-04-14 10:43:15 发布

阅读量2.9k

点赞数 2

文章标签： js

本文链接：https://blog.csdn.net/sk_yi/article/details/107215832

版权

在这里插入图片描述
这个使用预设置类名再添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
             li{
                 list-style: none;
                 float: left;
                 margin-left: 5px;
                 background: yellow;
                 padding: 1px;
                 border-radius: 3px;
                 border:1px solid #999;
             }
             .active{
                 color:red;
             }
         </style>
    </head>  
  
     <body>  
         <div id="example">  
            <ul>
                 <li>按钮一</li>
                 <li>按钮二</li>
                 <li>按钮三</li>
                 <li>按钮四</li>
                 <li>按钮五</li>
                 <li>按钮六</li>
                 <li>按钮七</li>
                 <li>按钮八</li>
             </ul>
         </div>  
     </body>  
   
 </html>
 <script>
     var buttons=document.getElementsByTagName("li");
     var l=buttons.length;
     for(var i=0;i<l;i++){
         buttons[i].onclick=function(){
             for(var j=0;j<l;j++){
                 if(this==buttons[j]){
                     this.className="active";
                 }else{
                     buttons[j].className="";
                 }
 
             }   
        }
     }
 </script>

在这里插入图片描述
预设颜色名再按钮里，再提取颜色名并设置颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .list{
            display: flex;justify-content: left;
        }
        button{
            height: 30px;
            outline: none;
            border: none;
            margin-left: 5px;
            padding:0 20px;
        }
        .btn{
            margin-top: 10px;
            color: white;
            background-color: black;
        }
        p{
            font-size: 30px;
            font-weight: 700;
            margin-left: 5px;
        }
        
    </style>
</head>
<body>
    <div class="list">
        <button class="btn1" data-color ='yellow'>黄色</button>
        <button class="btn1" data-color ='green'>绿色</button>
        <button class="btn1" data-color ='blue'>蓝色</button>
        <button class="btn1" data-color ='pink'>粉色</button>
        <button class="btn1" data-color ='purple'>紫色</button>
    </div>
    <button class="btn">改变字体颜色</button>
    <p>字体</p>
</body>
</html>
<script>
    var btn = document.querySelector('.btn');
    var p = document.querySelector('p')
    var child = document.querySelectorAll('.btn1')

    for(var i = 0;i<child.length;i++){
        (function(){
            var x = i
            child[x].onclick=function(){
                btn.tid = child[x].getAttribute('data-color')
                for(var j = 0;j<child.length;j++){
                    if(this==child[j]){
                        this.style.background = btn.tid
                    }else{
                        child[j].style.background = ''
                    }
                }
                btn.onclick = function(){
                    p.style.color=btn.tid
                }
            }
            
        })()
    }

伤感的痛楚

关注

2
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
原生js实现按钮改变颜色其他颜色不变的操作

这个使用预设置类名再添加<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .
复制链接

扫一扫