JS day28 排他思想

最新推荐文章于 2023-07-09 10:49:12 发布

肝JOJO

最新推荐文章于 2023-07-09 10:49:12 发布

阅读量123

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_34620296/article/details/101226448

版权

JavaScript 专栏收录该内容

59 篇文章 1 订阅

订阅专栏

例1:给5个按钮都绑定点击事件,点击的某个按钮变为粉色

    <script type="text/javascript">
	   window.onload=function(){
        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="";  //点击后先去掉所有颜色
                }
                this.style.backgroundColor="pink";  //然后当前变为粉色
            }
        }
    }

    </script>

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <button>按钮5</button>
    
</body>

练习1:网页换皮肤案例
分析:
1.先给四个小图片利用循环注册点击事件
2.点击图片,整个页面背景变为当前图片
3.把当前图片的src路径取过来,给body作为背景即可

    <style>
        body{
            background: url(img/蜘蛛侠.jpg) no-repeat center top;
        }
        li{
            list-style: none;                     
        }
        .baidu{
            overflow: hidden;  
            /* 超出给定宽高部分被隐藏 */
            margin: 100px auto;
            /* 左右自适应 */
            text-align: center;
            width: 410px;
            padding-top: 10px;
        }
        .baidu li{
            float: left;
            margin:1px;
            cursor: pointer;  
            /* 光标显示类型为链接(一只手) */
            text-align: center;
            background-color:white;
            
        }
        .baidu img{
            width: 110px;
        }
    </style>

    <script type="text/javascript">
    	window.onload=function(){
        var imgs=document.querySelector(".baidu").querySelectorAll("img");
        for(var i=0;i<imgs.length;i++){
            imgs[i].onclick=function(){
                document.body.style.backgroundImage="url("+this.src+")";
            }
        }
    }

    </script>

<body>
    <ul class="baidu">
        <li><img src="img/蜘蛛侠.jpg" alt=""></li>
        <li><img src="img/萝莉.jpg" alt=""></li>
        <li><img src="img/死侍.jpg" alt=""></li>
    </ul>
    
</body>

肝JOJO

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS day28 排他思想

例1:给5个按钮都绑定点击事件,点击的某个按钮变为粉色 <script type="text/javascript"> window.onload=function(){ var btns=document.getElementsByTagName("button"); //会得到伪数组 for(var i=0;i<btns.len...
复制链接

扫一扫

专栏目录