테스트 사이트 - 개발 중인 베타 버전입니다

.height()

· 8년 전 · 1536

.height()

설명 : 일치하는 요소 집합의 첫 번째 요소에 대한 현재 계산 된 높이를 가져옵니다.

간의 차이 .css( "height" )와 .height()후자 (예를 들어, 단위가없는 화소 값을 반환하는 것이다 400)하면서 전자 리턴 (예를 들면, 완전한 단위의 값 400px). 이 .height()방법은 요소의 높이를 수학 계산에 사용해야 할 때 권장됩니다.

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

참고 .height()항상 CSS의 값에 관계없이 내용의 높이를 반환합니다 box-sizing속성입니다. jQuery 1.8부터는 CSS 높이 + box-sizing속성을 검색 한 다음 요소가있을 때 각 요소에서 잠재적 인 경계 및 패딩을 빼야 할 수 있습니다 box-sizing: border-box. 이 페널티를 피하려면, .css( "height" )보다는 페널티를 사용하십시오 .height().

예:
다양한 높이를 보여주십시오. 값은 iframe에서 가져온 값이므로 예상 한 것보다 작을 수 있습니다. 노란색 강조 표시는 iframe 본문을 표시합니다.


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>height demo</title>
  <style>
  div {
    width: 50px;
    height: 70px;
    float: left;
    margin: 5px;
    background: rgb(255,140,0);
    cursor: pointer;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.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>

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

게시글 목록

번호 제목
16286
16281
16277
16276
16268
16266
16264
16263
16262
16259
16258
16257
16255
16233
16229
16222
16220
16219
16217
16214
16213
16211
16207
16205
16197
16195
16192
16191
16188
16187