차원

jQuery를 사용하면 요소 및 브라우저 창의 크기를 다루는 것이 쉽다.

차원 작업

• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()

jQuery width() 및 height()

width() 메서드는 요소의 너비(패딩, 테두리 및 여백 제외)를 설정하거나 반환한다.

height() 메서드는 요소의 높이(패딩, 테두리 및 여백 제외)를 설정하거나 반환한다.

예제

$("button").click(function(){
  var txt = "";
  txt += "Width: " + $("#div1").width() + "
";
  txt += "Height: " + $("#div1").height();
  $("#div1").html(txt);
});

jQuery innerWidth() 및 innerHeight()

innerWidth() 메서드는 요소의 너비(패딩 포함)를 반환한다.

innerHeight() 메서드는 요소(패딩 포함)의 높이를 반환한다.

예제

$("button").click(function(){
  var txt = "";
  txt += "Inner width: " + $("#div1").innerWidth() + "
";
  txt += "Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth() 및 outerHeight()

outerWidth() 메서드는 요소의 너비(패딩 및 테두리 포함)를 반환한다.

outerHeight() 메서드는 요소(패딩 및 테두리 포함)의 높이를 반환한다.

예제

$("button").click(function(){
  var txt = "";
  txt += "Outer width: " + $("#div1").outerWidth() + "
";
  txt += "Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

jQuery outerWidth(true) 및 outerHeight(true)

outerWidth(true) 메서드는 요소의 너비(패딩, 테두리 및 여백 포함)를 반환한다.

outerHeight(true) 메서드는 요소의 높이(패딩, 테두리 및 여백 포함)를 반환한다.

예제

$("button").click(function(){
  var txt = "";
  txt += "Outer width (+margin): " + $("#div1").outerWidth(true) + "
";
  txt += "Outer height (+margin): " + $("#div1").outerHeight(true);
  $("#div1").html(txt);
});

jQuery의 더 많은 width() 및 height()

예제 1

$("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);
});

예제 2

$("button").click(function(){
  $("#div1").width(500).height(500);
});

Mingg`s Diary

밍구

공부 목적 블로그

https://maz.kr

모든 포스트 보기