[jQuery] Dimensions

 

 

 

1. .width()와 .height()

: .width() - 요소의 폭(padding, border, margin 포함하지 않음)을 설정하거나 반환

: .height() - 요소의 높이(padding, border, margin 포함하지 않음)를 설정하거나 반환

: 예) $("button").click(function() {

var txt = "";

txt += "Width : " + $("div1").width() + "</br>";

txt += "Height : " + $("div1").height() + "</br>";

$("#div1").html(txt);

});

 

2. .innerWidth()와 .innerheight()

: .innerWidth() - 요소의 padding을 포함한 너비를 반환

: .innerHeight() - 요소의 padding을 포함한 높이는 반환

: 예) $("button").click(function() {

var txt = "";

txt += "innerWidth : " + $("div1").innerWidth() + "</br>";

txt += "innerHeight : " + $("div1").innerHeight() + "</br>";

$("#div1").html(txt);

});

 

3. .outerWidth()와 .outerHeight()

: .outerWidth() - 요소의 padding과 border를 포함한 너비를 반환

: .outerHeight() - 요소의 padding과 border을 포함한 높이는 반환

: 예) $("button").click(function() {

var txt = "";

txt += "outerWidth : " + $("div1").outerWidth() + "</br>";

txt += "outerHeigh t: " + $("div1").outerHeight() + "</br>";

$("#div1").html(txt);

});

 

4. outerWidth(true)와 .outerHeight(true)

: .outerWidth(true) - 요소의 padding과 border, margin을 포함한 너비를 반환

: .outerHeight(true) - 요소의 padding과 border, margin 포함한 높이는 반환

: 예) $("button").click(function() {

var txt = "";

txt += "outerWidth(+margin) : " + $("div1").outerWidth(true) + "</br>";

txt += "outerHeight(+margin) : " + $("div1").outerHeight(true) + "</br>";

$("#div1").html(txt);

});

 

* 문서와 창의 폭과 높이를 반환

 

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

 

});