transition属性实现div点击拉伸,再点击收回效果

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>004title>
    <style>
        div { width: 80px; height: 50px; background-color: #90FF8E;
            transition: width 4s;   /* 改变宽度,时间4 */
        }
    style>
head>
<body>
    <div id="con" οnclick="add();">
        <p><span>我们的歌span>p>
    div>
    <script>
        function add() {
            var con = document.getElementById('con');
            var width = parseInt(con.style.width || con.clientWidth || con.offsetWidth || con.scrollWidth);
            console.log(width);
                if (width<100){
                    con.style.width = '200px';
                }else {
                    con.style.width = '80px';
                }
        }
    script>
body>
html>

transition属性实现div点击拉伸,再点击收回效果_第1张图片


你可能感兴趣的:(Javascript)