210404 JavaScript jQueryアスペクト比練習1

11898 ワード
JavaScript jquery JavaScript 2回目のクエリ テキストリンク 
<!DOCTYPE html>
<html lang="en">
    <head>
            <meta charset="UTF-8">
            <title>Document</title>
            <style>
                div {
                    background-color: powderblue;
                    margin: 50px auto;
                }

                .box1{width: 100px; height: 200px;}
                .box2{width: 500px; height: 200px;}
                .box3{width: 300px; height: 700px;}
                .box4{width: 400px; height: 300px;}
                .box5{width: 190px; height: 800px;}
            </style>
    </head>
    <boby>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
        <div class="box5"></div>
        <script src="js/jquery-3.6.0.min.js"></script> 
        <script src="js/jquery-ui.min.js"></script> 
        
        <script>
            /*
                $(sel).width(); //해당 선택자의 width 값을 가져옴
                $(sel).width(num); //너비값 반영
                $(sel).height(); //해당 선택자의 height 값을 가져옴
                $(sel).height(num); //너비값 반영
                is()메서드는 선택자의 상태를 묻는 메서드
                var a = $(this).is(":animated");
                if(a === false)
            */

            $("div").on("click", function(){
                var w = $(this).width();
                var h = $(this).width();

                $(this).stop().animate({
                    "width" : h,
                    "height" : w
                });
            });
        </script>
    </boby>
    </html>
[ココア出力]ランキング検索/Python/資料構造と探索
Lv.1小数を作成