본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 요소 높이 제어, height()

by zoo10 2011. 11. 22.

.height()

원문 링크 http://api.jquery.com/height/

함수들

height( )
  • .height()
height( value )
  • .height( value )
  • .height( function(index, height) )

.height()Returns : Integer

개요 : 일치된 요소 집합 중 첫번째 요소에 대해 현재의 계산된 높이를 얻을 수 있습니다.

  • .height()

.css('height').height() 간의 차이점은 픽셀 텍스트의 유무에 있습니다. 예를 들어, 400400px의 차이입니다. .height() 함수는 수학적인 계산을 필요로 할때 사용하시면 됩니다.

또한 이 함수는 window와 document의 높이를 알고 싶을 때 사용할 수도 있습니다.

$(window).height();   // returns height of browser viewport
$(document).height(); // returns height of HTML document

Note. .height() 함수는 컨텐츠의 높이만 반환합니다. CSS의 box-sizing 속성값과는 상관없습니다.

예 제  
다양한 높이를 구해봅니다. Note 아이프레임의 높이는 기대한 것보다 작게 나옵니다. 노란색 강조 영역은 iframe의 body부분입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
  body { background:yellow; }
  button { font-size:12px; margin:2px; }
  p { width:150px; border:1px red solid; }
  div { color:red; font-weight:bold; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <button id="getp">Get Paragraph Height</button>
  <button id="getd">Get Document Height</button>
  <button id="getw">Get Window Height</button>

  <div>&nbsp;</div>
  <p>
    Sample paragraph to test height
  </p>
<script>
    function showHeight(ele, h) {
      $("div").text("The height for the " + ele + 
                    " is " + h + "px.");
    }
    $("#getp").click(function () { 
      showHeight("paragraph", $("p").height()); 
    });
    $("#getd").click(function () { 
      showHeight("document", $(document).height()); 
    });
    $("#getw").click(function () { 
      showHeight("window", $(window).height()); 
    });

</script>

</body>
</html>

미리보기

버튼들을 클릭해 보세요. 그에 맞는 높이를 반환해 줍니다.

 

.height( value )Returns : jQuery

개요 : CSS 높이를 바꿔줍니다.

  • .height( value )
  • value 픽셀값
  • .height( function(index, height) )
  • function(index, height) 높이를 반환하는 함수.

.height(value) 함수의 인자인 value 값으로는 문자열(단위를 포함한 숫자) 또는 숫자를 사용할 수 있습니다. 만일 숫자로 인자를 제공하면 jQuery는 pixel 단위라고 가정합니다. 하지만 문자열을 사용하면 반드시 CSS 에 사용할 수 있는 값만 사용할 수 있습니다. 즉, 100px, 50%, auto와 같이 사용해야 하는 것입니다. Note 최신 브라우져들은 CSS height 속성에 padding, border, margin 값을 포함하지 않습니다.

만약 단위를 명확하게 표현하지 않았다면 "px" 을 연결합니다.

Note .height(value)는 CSS의 box-sizing 속성을 고려하여 height 값을 변경시킵니다. border-box 속성을 변경하면 내용의 높이 대신 박스의 외부높이(outerHeight)를 변경하게 됩니다.

예 제  
각 div 영역을 클릭하면 높이와 색깔을 변화시킵니다.

<!DOCTYPE html>
<html>
<head>
  <style>div { width:50px; height:70px; float:left; margin:5px;
        background:rgb(255,140,0); cursor:pointer; }  </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>

  <div></div>
  <div></div>
  <div></div>
<script>$("div").one('click', function () {
      $(this).height(30)
             .css({cursor:"auto", backgroundColor:"green"});
    });</script>

</body>
</html>

미리보기

클릭해 보세요. 높이가 줄어듭니다.

 

핵심은 원하는 대로 높이를 조절하려면 박스 사이즈 같은 것을 염두에 두어야 한다는 것 같습니다. 사실 저도 글만 봐서는 잘 와닿지 않네요. 역시 코딩은 실습인 것 같습니다.

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.