jQuery元素尺寸的操作

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

//jQuery width() 和 height() 方法
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height();
    $("#div1").html(txt);
  });
});

//jQuery innerWidth() 和 innerHeight() 方法
$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Inner width of div: " + $("#div1").innerWidth() + "</br>";
    txt+="Inner height of div: " + $("#div1").innerHeight();
    $("#div1").html(txt);
  });
});

//jQuery outerWidth() 和 outerHeight() 方法

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div: " + $("#div1").outerWidth() + "</br>";
    txt+="Outer height of div: " + $("#div1").outerHeight();
    $("#div1").html(txt);
  });
});

//outerWidth(true) 方法返回元素的宽度（包括内边距、边框和外边距）。

//outerHeight(true) 方法返回元素的高度（包括内边距、边框和外边距）。

$(document).ready(function(){
  $("button").click(function(){
    var txt="";
    txt+="Width of div: " + $("#div1").width() + "</br>";
    txt+="Height of div: " + $("#div1").height() + "</br>";
    txt+="Outer width of div (margin included): " + $("#div1").outerWidth(true) + "</br>";
    txt+="Outer height of div (margin included): " + $("#div1").outerHeight(true);
    $("#div1").html(txt);
  });
});

//jQuery - 更多的 width() 和 height()

$(document).ready(function(){
  $("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);
  });
});


$(document).ready(function(){
  $("button").click(function(){
    $("#div1").width(320).height(320);
  });
});