[HTML_CSS] JQ - width() , height() , innerWidth() , innerHeight() , outerWidth() , outerHeight() 메서드 ★ - (너비,높이, 면적) 메서드

목차

1. (너비/높이) 크기 관련 메서드 종류
2. 예제1 - (너비/높이) 메서드 값 차이
3. 예제2 - (document / window) 크기
4. 예제3 - 요소의 (width / height) 설정

(너비/높이) 크기 관련 메서드 종류

 

• width()  : 순수 요소 너비 (= 가로길이)
• height()  : 순수 요소 높이 (= 세로길이) 

---

• innerWidth()  : width + padding
• innerHeight()  : height + padding 

---

• outerWidth()  : width + padding + border 
• outerHeight()  : height + padding + border 

---

• outerWidth(true)  : width + padding + border + margin
• outerHeight(true)  : height + padding + border + margin

 

PS. 주의: (padding, border, margin)은 각각 "좌우 (상하)" 고려해 계산.

예제1 - (너비/높이) 메서드 값 차이

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        var txt = "";

        txt += "width(): " + $("#hz").width() + "</br>"; 

        txt += "height(): " + $("#hz").height() + "</br>"; 

        txt += "innerWidth(): " + $("#hz").innerWidth() + "</br>"; 

        txt += "innerHeight(): " + $("#hz").innerHeight() + "</br>"; 

        txt += "outerWidth(): " + $("#hz").outerWidth() + "</br>"; 

        txt += "outerHeight(): " + $("#hz").outerHeight() + "</br>";

        txt += "outerWidth(true): " + $("#hz").outerWidth(true) + "</br>";

        txt += "outerHeight(true): " + $("#hz").outerHeight(true);

        $("#hz").html(txt);

    });

});

</script>

<style>

#hz {

    height: 200px;

    width: 300px;

    padding: 10px;

    margin: 20px;

    border: 5px solid #f70542;

    background-color: #fff8f8;

    color:#f70542;

}

</style>

<div id="hz"></div> 

<button>div 요소의 순수 면적 표시</button>

결과 보기

예제2 - (document / window) 크기

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        var txt = "";

        txt += "Document 너비x높이: " + $(document).width();

        txt += "x" + $(document).height() + "\n";

        txt += "Window 너비x높이: " + $(window).width();

        txt += "x" + $(window).height();

        alert(txt);

    });

});

</script>

<button>document와 window 면적 표시</button>

결과 보기

※ alert (얼럿창 = 경고창)에서는 줄바꿈을 \n 사용

예제3 - 요소의 (width / height) 설정

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("#hz").width(200).height(25);

    });

});

</script>

<style>

#hz {

    height: 100px;

    width: 300px;

    padding: 10px;

    margin: 20px;

    border: 5px solid #f70542;

    background-color: #fff8f8;

    color: #f70542;

}

</style>

<div id="hz">홈짱닷컴 Homzzang.com</div>

<button>Resize div</button>

결과 보기