English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
使用jQuery，可以轻松处理元素和浏览器窗口的尺寸。
jQuery提供了有效地操作元素尺寸的方法。
在本章中，我们将解释如何获取或设置HTML元素的尺寸。
我们具有以下用于处理尺寸的jQuery方法：
下面将向您展示如何使用每种方法。
请查看下图，以了解这些方法如何计算元素框的尺寸。
jQuery width()方法获取或设置所选元素的宽度（不包括内边距，边框和外边距）。
jQuery height()方法获取或设置所选元素的高度（不包括内边距，边框和外边距）。
下面的示例获取DIV元素的宽度和高度：
$("div").click(function(){
let w = $(this).width();
let h = $(this).height();
$(this).html("DIV의 너비: " + w + "<br>" + "DIV의 높이: " + h);
});테스트를 보고‹/›다음 예제는 모든 제목의 너비와 높이를 설정합니다：
$("button").click(function(){
$("p").width(250);
$("p").height(100);
});테스트를 보고‹/›jQuery innerWidth()메서드는 선택된 요소의 너비(내간격 포함)를 가져오거나 설정합니다。
jQuery innerHeight()메서드는 선택된 요소의 높이(내간격 포함)를 가져오거나 설정합니다。
다음 예제는 DIV 요소의 내부 너비와 내부 높이를 가져옵니다：
$("div").click(function(){
let w = $(this).innerWidth();
let h = $(this).innerHeight();
$(this).html("Inner 너비: " + w + "<br>" + "Inner 높이: " + h);
});테스트를 보고‹/›jQuery outerWidth()메서드는 선택된 요소의 너비(내간격, 테두리 포함)를 가져오거나 설정합니다。
jQuery outerHeight()메서드는 선택된 요소의 높이(내간격, 테두리 포함)를 가져오거나 설정합니다。
다음 예제는 DIV 요소의 외부 너비와 외부 높이를 가져옵니다：
$("div").click(function(){
let w = $(this).outerWidth();
let h = $(this).outerHeight();
$(this).html("Outer 너비: " + w + "<br>" + "Outer 높이: " + h);
});테스트를 보고‹/›outerWidth(true) 메서드는 선택된 요소의 너비(내간격, 테두리, 외간격 포함)를 가져오거나 설정합니다。
outerHeight(true) 이 메서드는 선택된 요소의 높이(내간격, 테두리, 외간격 포함)를 가져오거나 설정합니다。
다음 예제는 DIV 요소의 외부 너비와 외부 높이(마argins 포함)를 가져옵니다：
$("div").click(function(){
let w = $(this).outerWidth(true);
let h = $(this).outerHeight(true);
$(this).html("Outer 너비[+margin]:" + w + "<br>" + "Outer 높이[+margin]: " + h);
});테스트를 보고‹/›width()，height()，innerWidth()，innerHeight()，outerWidth()와 outerHeight() 간의 차이를 표시합니다：
$("button").click(function(){
$("div").width();
$("div").innerWidth();
$("div").outerWidth();
$("div").height();
$("div").innerHeight();
$("div").outerHeight();
});테스트를 보고‹/›또한 창과 문서의 너비와 높이를 찾을 수 있습니다:
$(window).width();// 브라우저 창의 너비를 반환하다 $(document).width(); // HTML 문서의 너비를 반환하다 $(window).height();// 브라우저 창의 높이를 반환하다 $(document).height(); // HTML 문서의 높이를 반환하다테스트를 보고‹/›
완전한 CSS 메서드에 대한 참조를 위해 방문해 주세요jQuery HTML / CSS 참조。