Javascript实现单击按钮切换样式

最新推荐文章于 2024-01-30 10:36:17 发布

diaofei4818

最新推荐文章于 2024-01-30 10:36:17 发布

阅读量1.4k

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/wxx-17-5-13/p/8203700.html

版权

click绑定两个方法

<style type="text/css">
    #layout{
        width: 320px;
        margin:auto auto ;
        }
    .lay{
        width: 100px;
        height: 100px;
        background-color: orangered;
        display: inline-block;
    }
    .lay2{
        width: 200px;
        height: 150px;
        background-color: greenyellow;
        display: inline-block;
    }
</style>
<body>
      <div id="layout">
            <div class="lay" ></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
            <div class="lay"></div>
        </div>
        <input type="button" value="改变九宫格样式" id="but3"/>
<script type="text/javascript">

    var but3 = document.getElementById('but3');
    var str = document.getElementById('layout').childNodes;    //获得“class='lay'的9个div”
    but3.onclick = function(){                  //给button绑定点击事件，通过判断className的值进行切换样式
        if(str[1].className == 'lay'){
            for( var i=0;i< str.length;i++){
                str[i].className = 'lay2';
            };
        }else{
            for( var i=0;i< str.length;i++){
                str[i].className = 'lay';
            }
                        
        }
    }
</script>
</body>

转载于:https://www.cnblogs.com/wxx-17-5-13/p/8203700.html

diaofei4818

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript实现单击按钮切换样式

click绑定两个方法<style type="text/css"> #layout{ width: 320px; margin:auto auto ; } .lay{ width: 100px; height: 100px; back...
复制链接

扫一扫