3章 属性、CSS操作
幅、高さ操作
直前で見た.css()を使っても幅や高さを取得することは可能ですが、より便利な.width()と.height()が用意されています。
.width()
.width()
マッチした要素の最初の要素の幅を整数値（単位はpx）で取得します。値は計算済みの値が取得されますので、例えば、50%などが要素に指定されていた場合は、それをpx単位で計算した値が返されます。
.css("width")との違いは、.css("width")は、単位付きの文字列を返すのに対し、.width()は、単位を除いた整数値で返します。その為、計算ですぐに使うことができます。
具体例を見てみましょう。
<style>#outside {width: 100px;
}
#inside {width: 50%;
}
</style><div id="outside">
<div id="inside">
</div>
</div><div id="alone">
</div>var ret1 = $("#outside").width();
var ret2 = $("#inside").width();
var ret3 = $("#alone").width();
// 値を出力します。（Firebugなどで動作します）console.log(ret1);
console.log(ret2);
console.log(ret3);
このようにすると、次の結果になります。
ret3は、特にCSSでは幅を指定していませんが、その都度計算された値を返しています。（ここではたまたま、1115になっています）
width()は、CSS3 box-sizingの値に関わらず、content width（paddingよりも更に内側の表示領域）の値を返します。 また、次のような使い方もできます。
$(window).width(); // ブラウザの横幅
$(document).width(); // HTMLドキュメントの横幅
$(window).height();// ブラウザの高さ
横にスクロールバーが出る状態の時は、HTMLドキュメントの方が、ブラウザの横幅よりも大きくなりますね。
少し余談ですが、この.width()メソッドがもし無かった場合、数値で横幅を得たい場合はどうすれば良いでしょうか？ その場合は、.css("width")で取得した値をJavaScript関数の.parseInt()に掛ければOKです。
// 実際には、.width() があるので、このような処理は不要var w = $("#div1").css("width");
var width = parseInt(w, 10);
parseIntには、トラブル防止の為、第2引数に10（10進数）を指定するのが良い習慣です。
.width(value)
幅をvalueに設定します。valueを150などのように単位を省略した場合は、pxが自動で設定されます。'50%'などのように単位付きの文字列で指定することもできます。
例）
$("#outside").width(500);
少し込み入った話ですが、今時の近代的ブラウザでは、CSSのwidthは、デフォルトでは、padding、border、marginを含みません（content-box） 。しかし、CSS3の{box-sizing: border-box;}とすることで、paddingとborderを含むようにすることができます。jQueryでは、{box-sizing: border-box;}の時は、content widthの幅ではなく、outerWidthの幅を設定（変更）します。
.height()
width()の縦バージョンです。width()を参照して下さい。
.innerWidth()、.innerHeight()
上記の .width()は、borderやpadding幅も含まないのに対して、.innerWidth()は、paddingの幅は含みます。（borderは含みません）
.innerHeight()も同様です。
.outerWidth()、.outerHeight()
.outerWidth([includeMargin])、.outerHeight([includeMargin])
もし引数が省略されているかfalseの場合は、borderとpadding幅も含んだ横幅を返します。引数にtrueを指定した場合は、更にmargin幅も含みます。
.outerHeight()も同様です。