HTML按钮通过JS实现选中和取消

最新推荐文章于 2024-06-18 14:33:23 发布

抢我糖还想跑

最新推荐文章于 2024-06-18 14:33:23 发布

阅读量817

点赞数

分类专栏：前端 # HTML

本文链接：https://blog.csdn.net/qq_41749451/article/details/126229761

版权

JavaScript DOM操作背景图片交互设计单选按钮

关键词由CSDN通过智能技术生成

HTML 同时被 2 个专栏收录

13 篇文章 3 订阅

订阅专栏

前端

10 篇文章 0 订阅

订阅专栏

单选按钮选中/取消

 <script  type="text/javascript">
            let b1=0;//定义变量b
            
            function select1(){
                b1++;
                if (b1%2==0){
                    document.getElementById("gouxuan1").style.background = "url(image/queren1.png)";
                    document.getElementById("gouxuan1").style.backgroundRepeat="no-repeat";
                    document.getElementById("gouxuan1").style.backgroundSize="0px 0px";
                    document.getElementById("gouxuan1").style.backgroundPosition="center center";
                }else {
                   
                    document.getElementById("gouxuan1").style.background = "url(image/queren.png)";
                    document.getElementById("gouxuan1").style.backgroundRepeat="no-repeat";
                    document.getElementById("gouxuan1").style.backgroundSize="20px 20px";
                    document.getElementById("gouxuan1").style.backgroundPosition="center center";
                }
               
               
            }
 </script>

 <div name="T_div1" class="T_div1" onclick="select1()">
        <p class="p3">全国</p>
        <img class="img2" src="image/icon-zbsmalt.png">                
        <p class="p1">11111</p>
        <span>最高可贷<b>300</b>万</span>
        <p class="p2" style="color:#79AABB">利率低   纯信用 可循环</p>
</div>