• Q&A
  • 회원가입
  • 로그인

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

215  

목차

  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>


결과 보기



찾아주셔서 감사합니다. Since 2012