JQuery Dimension

다음 Style의 Box와 JQuery Dimension함수들
width(), height(),
innerWidth(), innerHeight(),
outerWidth(), outerHeight(),
outerWidth(true), outerHeight(true)
사용법과 차이점

Source

.box {
    background-color: lightgrey;
    width: 350px;
    border: 10px solid green;
    padding: 25px;
    margin: 20px ;
}

$(document).ready(function(){
  var txt = "";
  txt += "Width: "+$(".box").width() ;
  txt += "Height: "+$(".box").height();
  txt += "Inner W: "+$(".box").innerWidth();
  txt += "Inner H: "+$(".box").innerHeight();
  txt += "Outer W: "+$(".box").outerWidth();
  txt += "Outer H: "+$(".box").outerHeight();
  txt += "Outer W: "+$(".box").outerWidth(true);
  txt += "Outer H: "+$(".box").outerHeight(true);
  $(".box").html(txt);
});

Result