티스토리 뷰

(기초)그래서 뭘 배운거야?/jQuery

JQ-16-객체조작메서드(width / height)

Soheny.P 2021. 10. 14. 09:41
728x90
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/JS/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            /* 전체 크기를 border+padding+content를 width로 잡음 */
            box-sizing: border-box;
        }

        #p1,
        #p2 {
            width: 100px;
            height: 100px;
            padding: 20px;
            border: 5px solid #000;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <h1>수치 조작 메서드</h1>
    <p id="p1">내용1</p>
    <p id="p2">내용2</p>

    <script>
        $(function () {

            // content
            let h1 = $("#p1").height();
            console.log(h1); //100 //50(box-sizing이 border-box인 경우)

            // content + padding
            let h2 = $("#p1").innerHeight();
            console.log(h2); //140 //90(box-sizing이 border-box인 경우)

            // content + padding + border
            let h3 = $("#p1").outerHeight();
            console.log(h3) //150 //100(box-sizing이 border-box인 경우)


            // inner = content+pading / outer = content+padding+border
            $("#p2").innerWidth(200).outerHeight(200);
        });
    </script>
</body>

</html>

728x90
저작자표시 비영리 변경금지 (새창열림)

'(기초)그래서 뭘 배운거야? > jQuery' 카테고리의 다른 글

JQ-17-객체조작메서드(offset / position)  (0) 2021.10.14
JQ-15-객체조작메서드(val / prop)  (0) 2021.10.13
JQ-14-객체조작메서드(class / text)  (0) 2021.10.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/05   »
일 월 화 수 목 금 토
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
글 보관함