Javascript實現單擊按鈕切換樣式

本文轉載自查看原文 2018-01-05 12:24 2601 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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 用Vue實現點擊一個按鈕，實現切換樣式的效果 Vue實現active點擊切換樣式 WPF兩個按鈕來回切換樣式 vue中如何實現點擊動態切換樣式 jQuery的屬性與樣式之切換樣式.toggleClass() css根據屏幕大小切換樣式 uniapp—點擊切換樣式事件 javascript實現單擊按鈕使div變大效果 js動態改變樣式,切換樣式 JButton變換樣式