최신 웹 개발 튜토리얼
 

jQuery - 치수

❮ 이전 다음 장 ❯

jQuery로, 그 요소 및 브라우저 윈도우의 크기에서 작동하기 쉽다.

jQuery를 치수 방법

jQuery를 치수 작업을위한 몇 가지 중요한 방법이 있습니다 :

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

jQuery를 치수

jQuery를 치수

의 jQuery width() 및 height() 메소드

width() 메소드 세트 또는 요소 (제외의 폭을 반환 padding, border 와 margin ).

height() 메소드 세트 또는 요소 (제외의 높이를 반환 padding, border 와 margin ).

다음 예제는 특정의 폭과 높이를 반환 <div> 요소를 :

예

$("button").click(function(){
    var txt = "";
    txt += "Width: " + $("#div1").width() + "</br>";
    txt += "Height: " + $("#div1").height();
    $("#div1").html(txt);
});
»그것을 자신을 시도

jQuery를 innerWidth() 및 innerHeight() 메소드

innerWidth() 메소드는 요소의 폭 (포함 반환 padding ).

innerHeight() 메소드는, 소자의 높이 (포함 반환 padding ).

다음 예제는 특정의 내부 너비 / 높이 반환 <div> 요소를 :

예

$("button").click(function(){
    var txt = "";
    txt += "Inner width: " + $("#div1").innerWidth() + "</br>";
    txt += "Inner height: " + $("#div1").innerHeight();
    $("#div1").html(txt);
});
»그것을 자신을 시도

jQuery를 outerWidth() 및 outerHeight() 메소드

outerWidth() 메서드는 요소의 폭을 반환합니다 (포함 padding 과 border ).

outerHeight() 메서드는 요소의 높이를 반환합니다 (포함 padding 과 border ).

다음 예제는 특정의 외부 너비 / 높이 반환 <div> 요소를 :

예

$("button").click(function(){
    var txt = "";
    txt += "Outer width: " + $("#div1").outerWidth() + "</br>";
    txt += "Outer height: " + $("#div1").outerHeight();
    $("#div1").html(txt);
});
»그것을 자신을 시도

outerWidth(true) 방법은 요소의 너비를 (포함 반환 padding, border 및 margin ).

outerHeight(true) 메소드는 요소의 높이를 (포함 반환 padding, border 및 margin ).

예

$("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);
});
»그것을 자신을 시도

연습으로 자신을 테스트!

연습 1» 운동 2» 운동 3» 운동 4» 운동 5»

jQuery를 CSS 참조

모든 jQuery를 CSS 방법의 전체 개요는, 우리로 이동하시기 바랍니다 jQuery를 HTML / CSS 참조 .


❮ 이전 다음 장 ❯