Javascript实现单击按钮切换样式

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>
posted on 2018-01-05 12:24 wxx17513 阅读(4225) 评论(0) 编辑收藏举报