jQuery 尺寸

通过 jQuery，很容易处理元素和浏览器窗口的尺寸。

jQuery 尺寸 方法

jQuery 提供多个处理尺寸的重要方法：

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

jQuery width() 和 height() 方法

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> 元素的 inner-width/height：

예제

$("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> 요소의 outer-width/height를 반환합니다:

예제

$("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 - 더 많은 width()와 height()

다음 예제는 문서(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 CSS 참조 매뉴얼

jQuery Dimensions에 대한 완전한 참조를 원하시면, 우리의 jQuery 크기 참조 매뉴얼을 방문하십시오.