js点击按钮划出菜单容器第一版

最新推荐文章于 2024-06-07 08:00:00 发布

milijiangjun

最新推荐文章于 2024-06-07 08:00:00 发布

阅读量257

点赞数

分类专栏： # Vue

本文链接：https://blog.csdn.net/milijiangjun/article/details/109664509

版权

Vue 专栏收录该内容

42 篇文章 1 订阅

订阅专栏



<!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>