English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
height() 메서드는 선택된 요소의 높이를 가져오거나 설정합니다。
height() 메서드가 사용될 때��取높이를 설정할 때, 그것은첫 번째 선택된 요소의 높이입니다。
height() 메서드가 사용될 때설정높이를 설정할 때, 그것은모든 선택된 요소의 높이입니다。
如下图所示，height() 메서드는 padding, border 또는 margin을 포함하지 않습니다：
높이 값도 상대적일 수 있습니다. 값에 접두어가 주어지면+=또는-=문자열 시퀀스가 있으면 현재 값에서 주어진 숫자를 더하거나 뺄 수 있어서 목표 높이를 계산합니다(예를 들어 height("+ = 50"））。
높이를 얻습니다：
$(selector).height()
높이를 설정합니다：
$(selector).height(value)
함수로 높이를 설정합니다：
$(selector).height(function(index, currentHeight))
DIV 요소의 높이를 얻습니다：
$("div").click(function(){
$(this).height();
}});/테스트를 보고‹모든 단락의 높이를 설정합니다：
$("button").click(function(){
$("p").height(50);
}});/테스트를 보고‹다른 단위로 모든 단락의 높이를 설정합니다：
$("#btn1").click(function(){
$("p").height(50);
}
$("#btn2").click(function(){
$("p").height("7em");
}
$("#btn3").click(function(){
$("p").height("100vh");
}});/테스트를 보고‹버튼을 클릭할 때 모든 단락의 높이를 증가시킵니다(기능 사용):
$("button").click(function(){
$("p").height(function(i, val){
return val * 2;
}
}});/테스트를 보고‹height() 메서드는 창과 문서의 높이를 찾을 수 있습니다：
$(window).height();// 브라우저 창의 높이를 반환합니다 $(document).height(); // HTML 문서의 높이를 반환합니다});/테스트를 보고‹
width()와 height()와 innerHeight()와 innerWidth()와 outerWidth()와 outerHeight() 간의 차이를 표시합니다：
$("button").click(function(){
$("div").width();
$("div").innerWidth();
$("div").outerWidth();
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
}});/테스트를 보고‹사용자가 페이지를 스크롤할 때 부드러운 스크롤 효과를 추가합니다：
let size = $(".main").height(); // ".main" 높이 가져오기
$(window).keydown(function(event) {
if(event.which === 40) { // 아래로 가기 키를 누를 경우
아래로 가기 키를 누를 경우+$("html, body").animate({scrollTop: " + =" 3size},
else if(event.which === 38} // ) {
아래로 가기 키를 누를 경우-$("html, body").animate({scrollTop: " + =" 3size},
00);
}});/테스트를 보고‹| 매개변수 값 | 매개변수 |
|---|---|
| 설명 | value |
| 픽셀 수를 나타내는 정수 또는 선택가능한 단위가 추가된 정수(문자로) | function(index, currentHeight)
|