목차
height() 예제 - 높이 반환 height() 정의 height() 구문 height() 예제 - 높이 설정 height() 예제 - 함수 사용해 높이 늘이기 height() 예제 - window 및 document 요소 높이 반환 height() 예제 - 관련 메서드와 비교
height() 예제 - 높이 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("div 높이: " + $("div").height());
});
});
</script>
<style>
div {
height:100px;
width:200px;
padding:10px;
margin:20px;
border:1px solid blue;
background-color:yellow;
}
</style>
<div></div>
<button>클릭</button>
결과보기
결과값: div 높이: 100
height() 정의
선택요소의 높이를 설정/반환.
1.
반환 - 선택자와 첫 번째 일치 요소 의 높이를 반환.
설정 - 선택자와 모든 일치 요소 의 높이를 설정.
2.
주의: (padding, border, margin) 값은 포함 X
3. cf.
(1) 너비
(2) 높이
4. cf.
PC 윈도우 높이: $(window).height()
모바일 높이: window.visualViewport.height
height() 구문
반환
$( selector ). height()
설정
$( selector ). height( value ) $( selector ). height(function( index,currentwidth ))
[매개변수]
value
필수. 설정할 높이값.
너비를 px, em, pt 등으로 지정. (기본 단위: px)
px가 아닌 em, pt 등 단위 붙일 땐, 큰따옴표(" ")로 감쌈. px는 기본 단위라서, 따로 단위 붙일 필요없이 숫자만 입력.
function (index, currentwidth
선택. 선택요소의 새 높이를 반환하는 함수.
index currentwidth
height() 예제 - 높이 설정
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("div").height(200);
});
$("#btn2").click(function(){
$("div").height("10em");
});
$("#btn3").click(function(){
$("div").height("100pt");
});
});
</script>
<style>
div {
height:100px;
width:200px;
padding:10px;
margin:20px;
border:1px solid blue;
background-color:yellow;
}
</style>
<button id="btn1">200px 설정</button>
<button id="btn2">10em 설정</button>
<button id="btn3">100pt 설정</button>
<div></div>
결과보기
height() 예제 - 함수 사용해 높이 늘이기
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").height(function(n, c){
return c + 200;
});
});
});
</script>
<style>
div {
height:100px;
border:4px solid;
margin:10px;
}
</style>
<button>높이를 200px 늘리기.</button><br><br>
<div></div>
<div></div>
결과보기
PS. 첫 번째 요소만 높이 늘리기: if(n ==0) return c + 200;
height() 예제 - window 및 document 요소 높이 반환
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#span1").text($(window).height());
$("#span2").text($(document).height());
});
});
</script>
<p>window 높이: <span id="span1">?</span> px.</p>
<p>document 높이: <span id="span2">?</span> px.</p>
<button>window 및 document 요소의 높이 반환</button>
결과보기
height() 예제 - 관련 메서드와 비교
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
var txt = "";
txt += "width: " + $("#hz").width() + "</br>";
txt += "innerWidth: " + $("#hz").innerWidth() + "</br>";
txt += "outerWidth: " + $("#hz").outerWidth() + "</br>";
txt += "outerWidth (margin 포함O): " + $("#hz").outerWidth(true) + "</br>" + "</br>";
txt += "height: " + $("#hz").height() + "</br>";
txt += "innerHeight: " + $("#hz").innerHeight() + "</br>";
txt += "outerHeight: " + $("#hz").outerHeight() + "</br>";
txt += "outerHeight(margin 포함): " + $("#hz").outerHeight(true) + "</br>";
$("#hz").html(txt);
});
});
</script>
<style>
#hz {
height:300px;
width:300px;
padding:10px;
margin:4px;
border:2px solid blue;
background-color:lightblue;
}
</style>
<div id="hz"></div>
<button>클릭</button>
결과보기
