js點選按鈕劃出選單容器第一版

milijiangjun發表於2020-11-13
JS


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>js重溫</title>

    <style type="text/css">
        
        .father {
            height:100px;
            width:100px;
            background-color:green;
 
            position:relative;
        }
 
        #son {
            height:50px;
            /* 隱去寬度 */
            width:10px;
            background-color:grey;
 
            position:absolute;
            top:0;
            right:100px;
 
            /* 收回的時候快一點 */
            transition:width 200ms;
        }
       
        /* 交集選擇器，所以父子關係的div盒子才可以 */
         #son2 {
            /* 將transition寫在;hover中，很是巧妙 */
            /* 伸展的時候慢一點 */
            width:100px;
            transition:width 800ms;           
        }
    </style>



    </head>
    <body>
    <div id="son" ></div>
        <div id="www">1111</div>
        <button type="button" onclick="replace3()">點選3</button><!--點選改變元素樣式-->
    </body>
    <script>
        
         function replace3(){
            var www=document.getElementById("www");//查詢元素
            www.style.color="red";//改變樣式
            var www2=document.getElementById("son");//查詢元素
            www2.style.width="100px";//改變樣式
            www2.style.transition = "width 200ms";
           
         }
    </script>
</html>

特效為點選按鈕更換顏色和 點選按鈕div動態10~100 變化

相關文章