jQuery - 차원
jQuery를 사용하면 요소 및 브라우저 창의 크기로 작업하기 쉽습니다.
jQuery 차원 메서드
jQuery에는 차원 작업을 위한 몇 가지 중요한 방법이 있습니다.
width()height()innerWidth()innerHeight()outerWidth()outerHeight()
jQuery 차원
jQuery 너비() 및 높이() 메서드
이 width()메서드는 요소의 너비를 설정하거나 반환합니다(패딩, 테두리 및 여백 제외).
이 height()메서드는 요소의 높이를 설정하거나 반환합니다(패딩, 테두리 및 여백 제외).
다음 예제는 지정된 <div>
요소의 너비와 높이를 반환합니다.
예시
$("button").click(function(){
var txt = "";
txt += "Width: " + $("#div1").width() + "</br>";
txt += "Height: " + $("#div1").height();
$("#div1").html(txt);
});
jQuery innerWidth() 및 innerHeight() 메서드
이 innerWidth()메서드는 요소의 너비를 반환합니다(패딩 포함).
이 innerHeight()메서드는 요소의 높이를 반환합니다(패딩 포함).
다음 예제는 지정된 <div>
요소의 내부 너비/높이를 반환합니다.
예시
$("button").click(function(){
var txt = "";
txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
txt += "Inner height: " + $("#div1").innerHeight();
$("#div1").html(txt);
});
jQuery outerWidth() 및 outerHeight() 메서드
이 outerWidth()메서드는 요소의 너비를 반환합니다(패딩 및 테두리 포함).
이 outerHeight()메서드는 요소의 높이를 반환합니다(패딩 및 테두리 포함).
다음 예제는 지정된 <div>
요소의 외부 너비/높이를 반환합니다.
예시
$("button").click(function(){
var txt = "";
txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
txt += "Outer height: " + $("#div1").outerHeight();
$("#div1").html(txt);
});
이 outerWidth(true)메서드는 요소의 너비를 반환합니다(패딩, 테두리 및 여백 포함).
이 outerHeight(true)메서드는 요소의 높이를 반환합니다(패딩, 테두리 및 여백 포함).
예시
$("button").click(function(){
var txt = "";
txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "</br>";
txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
$("#div1").html(txt);
});
jQuery 더 너비() 및 높이()
다음 예제는 문서(HTML 문서)와 창(브라우저 뷰포트)의 너비와 높이를 반환합니다.
예시
$("button").click(function(){
var txt = "";
txt += "Document width/height: " + $(document).width();
txt += "x" + $(document).height() + "\n";
txt += "Window width/height: " + $(window).width();
txt += "x" + $(window).height();
alert(txt);
});
다음 예에서는 지정된 <div>
요소의 너비와 높이를 설정합니다.
예시
$("button").click(function(){
$("#div1").width(500).height(500);
});
jQuery 연습
jQuery CSS 참조
모든 jQuery CSS 메서드에 대한 전체 개요를 보려면 jQuery HTML/CSS Reference 로 이동하십시오 .