)ver1.4.1〜機能jQueryオブジェクトで指定した要素の高さを取得/設定します。高さは左図のようにpaddingの内側を指します。引数を設定しない場合は高さの取得になります。要素が複数あるときは最初の要素からしか取得できません。cssメソッドと異なり数値で高さが取得できるので計算に利用できます。引数を設定すると高さの設定になります。ver1.4からは引数にfunctionを指定することも可能で、条件によって設定する値を変更するなど高度な処理にも対応できます。要素の高さを取得するサンプル(height/01.html)を開いてbody内にdiv要素が1つあることを確認してください。div要素に対してはcssの設定で高さを50pxに設定しています。#333;background-color:#ddd;}jQueryは以下の様に記述され、buttonをクリックするとdiv要素の高さを取得し、アラートで表示します。$("div").height();alert(ans);})結果としてbuttonをクリックすると、div要素の高さが(cssの設定と同じ)50と表示されます。この値は数値なので計算に利用できます。複数の要素からは高さを取得できませんセレクタで選択した要素が複数ある場合、heightメソッドは最初の要素の高さしか取得しません。サンプル(height/02.html)を開いてbody内にdiv要素が2つあり、最初のdiv要素にはtestのクラス属性が付加され高さが変更されていることを確認してください(高さは上から100px,50pxになっています)。class="test"></div><div></div>jQueryはheight/01.htmlから変更ありません。buttonをクリックするとアラートで100と表示され、最初のdiv要素からしか値が取得できない事が確認できます。mapメソッドを利用します。これについてはページ最下部の「メモ」を参照してください。ページの高さも取得できますセレクタにwindowを利用することでウインドウ高さ、documentを利用することでドキュメント高さも取得できます(設定はできません)。サンプル(height/03.html)を開いてbody内に大きなdiv要素があることを確認してください。jQueryは以下の様に記述され、buttonをクリックするとウインドウ高さとドキュメント高さを取得しアラートで表示します。document:"+doc);})実際にbuttonをクリックして、どの様な値が表示されるか確認してください。ウインドウの高さを灰色のdiv要素より大きくしている場合は、ウインドウ高さとドキュメント高さは同じになりますが、ウインドウの高さを灰色のdiv要素より小さくした場合は差が出ると思います。div要素の高さは1000pxに固定されているので、これ以下にはなりません。このサンプルではheightメソッドが正常に機能しない問題に悩まされました。原因は「DOCTYPE」の記述が無かったためです。heightメソッドはDOCTYPEの記述が無いと正常に機能しないことに注意してください。要素の高さを設定するheightメソッドは引数に「数値」を設定することで要素の高さを設定することができます。サンプル(height/04.html)を開いてbody内の構成がheight/01.htmlと同じ事を確認してください。jQueryは以下の様に変更され、buttonをクリックするとdiv要素の高さを100pxに設定します。$("button").click(function(){$("div").height(100);})結果として、buttonをクリックするとdiv要素の高さが100pxになります。このサイズはmarginやpadding、borderの値を含まないので(最初の図を参照)見かけの高さが100pxではないことに注意してください。高さを設定する場合は、セレクタで選択した要素が複数あってもOKです。すべての要素の高さをまとめて設定することができます。サンプル(height/04b.html)では2つのdiv要素がありますが、buttonをクリックすると両方とも高さが20pxになります。引数にFunctionを設定サンプル(height/05.html)を開いてbody内にdiv要素が5つあることを確認して下さい。jQueryは以下の様に記述されheightメソッドの引数にfunctionの「heightFunc」が設定されています。$("button").click(function(){$("div").height(heightFunc);})heightメソッドの引数に設定するFunctionは以下の様な構文になっています。引数(インデックス番号、現在の高さ)を受け取ります。これらの引数の値は{}内の処理で利用することができます。任意の処理の後で最終的に設定したい高さをreturnで返すようにします。設定する高さ;}サンプルheight/05.htmlで利用したheightFuncは以下の様になっており、index番号に1足した数値に50かけた値を返すようにしました。(index+1)*50;}結果としてbuttonをクリックするとdiv要素の高さが、左から50px,100px,150px,200px,250pxとなります。cssメソッドで算術複合代入子を利用して相対的に値を変化させることができていたので、heightメソッドでも試したところ、きちんと機能しました。サンプル(height/06.html)を開いてbody内の構成がheight/04.htmlと同じ事を確認してください。jQueryもほとんど同じで、異なるのは以下の様に引数に算術複合代入子を利用している点だけです。このときクォートが必要なので忘れないようにして下さい。$("button").click(function(){$("div").height("+=10");})結果として、buttonをクリックするたびに高さが10px増えていきます。innerHeightメソッドを利用します。outerHeightメソッドを利用します。メモmapメソッドを利用して複数の要素の値を取得サンプル(height/02.html)で確認したように、複数の要素の高さを取得しようとしても最初の要素からしか取得できません。mapメソッドを利用することで対応可能です。サンプル(height/test01.html)ではbuttonをクリックすると、各div要素の高さがアラートで表示されます(値は配列です)。viewport)が得られるとあるのですがdocumentと同じ値が返ってきます。documentはコンテンツ全体の高さで、スクロールしないと見えない範囲も含んだコンテンツの高さ。