JavaScriptフォーム操作

4823 ワード

来源:封尘网作者:admin发布时间:2009-03-12
ページの可視領域の幅:Dcument.body.clientWidthページの可視領域の高さ:document.body.clientHeightページの可視領域の幅:document.body.offset Widthページの可視領域の高さ:document.body.offset Height(境界線の幅を含む)document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています..screen.widthスクリーンの利用可能ワークエリアの高さ:window.screen.availHeightスクリーンの利用可能ワークエリアの幅:window.screen.avail Width
HTMLの正確な位置付け:scrollLeft、scrollwidth、clientWidth、offset WidthscrollHeight:オブジェクトのスクロールの高さを取得します.scrollLeft:オブジェクトの左端とウィンドウの左端の間にある距離scrollTopを設定または取得する:オブジェクトの一番上とウィンドウの中に見えるコンテンツの一番上の距離scrollwidthを設定または取得する:オブジェクトのスクロール幅offset Heightを取得する:レイアウトまたは親座標offsetPart属性によって指定された親座標に対するオブジェクトの高さoffsetPartを取得するeft:レイアウトまたはoffset Part属性で指定された親座標に対するオブジェクトの計算左位置offset Top:取得対象は、レイアウトまたはoffset Top属性で指定された親座標に対する計算先端位置event.client Xに対する文書の水平座標event.client.Y相対ファイルの垂直座標event.offsetX相対容器の水平座標event.offsetXの相対位置event.垂直座標document.documentElement.scrollTop垂直方向にスクロールする値event.client X+document.document.documentElement.scrollTopは、ドキュメントの水平座標+垂直方向にスクロールする量に対応します.
IE、FireFoxの違いは以下の通りです.
IE 6.0、FF 1.06+:
clientWidth=width+padding
clientHeight=height+padding
offset Width=width+padding+border
offset Height=height+padding+border
IE 5.0/5.5:clientWidth=width-border
clientHeight=height-border
offset Width=width
offset Height=height
(要注意:CSSにおけるmargin属性は、clientWidth、offset Width、clientHeight、offset Heightとは関係がない)
ページの可視領域は広いです.Dcument.body.clientWidthページの可視領域は高いです.document.body.client Heightページの可視領域は広いです.document.body.offset Widthページの可視領域は高いです.document.body.scrollwidthホームページの全文は高いです.document.body.scrollHeightページは巻かれています.高いです.document.body.scrollTopページは左に巻かれています.document.body.scrollLeftページの本文の部分はwindowowowowowows.screenpです.:window.screen.widthスクリーン利用可能ワークエリアの高さ:window.screen.availHeight画面利用可能ワークエリアの幅:window.screen.avail Width
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
技術の要点今回のコードは主にDockmentオブジェクトを使用しています.これらの属性の主な機能と使い方は以下の通りです.
ウィンドウのサイズを得るには、ブラウザの属性と方法が必要です.ウィンドウのサイズを確認するには、Netscapeの下でWindowの属性が必要です.IEの下でDcument内部に深く入り込む必要があります.DOM環境では、ウィンドウのサイズを得るためには、要素ではなくルート要素のサイズに注意が必要です.
Windowオブジェクトのinner Width属性は、現在のウィンドウの内部幅を含む.Windowオブジェクトのinner Height属性は、現在のウィンドウの内部高さを含んでいます.
Dcumentオブジェクトのbody属性は、HTMLドキュメントのラベルに対応します.DcumentオブジェクトのdocumentElement属性は、HTMLドキュメントのルートノードを表します.
Dcument.body.clientHeightはHTMLドキュメントがあるウィンドウの現在の高さを表します.Dcument.body.client WidthはHTMLドキュメントのあるウィンドウの現在の幅を表します.
コードを実現
[-]
Download 52004.txt

< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ブラウザウィンドウの実際の高さ:ブラウザウィンドウの実際の幅:<bragt;キルトlt;bragt;var windwidth=0;lt;bragt;var winHeight=0;lt;bragt;Function findDimensions()/関数:サイズ<を取得します.bragt;ウインドウの幅をとる<bregt;if<blt;bregt;bgt;windwidth=window.innewwidth;<bregt;else iht&&&(document.boddclintWidth;bredth&bredth;width;wintt;width;width;width&brelt;width;wittttttttf;width;width;width;width;width<width&brelt;width;width;width;width<width;<bragt;winHeight=window.inner Height;<bragt;else if((document.body)&&(document.body.clint Height)<bregt;windHeight=document.body.clint=docunt;jt/brand/brand/brand/bratttのサイズを取得します.Dcument.document Element&&document.document Element.clientHeight<blt<bregt;&&documentElement.docuntElement.clientWidth)<braggt;<<blt;bragt;<bragt;bragt;<blt;blt;bragt;bragt;>bragt;>blt;>Hegt;Hegt;Hegt;Hegt>Hegt;Hegt><bragt;//結果は2つのテキストボックス<bragt;document.form 1.availHeight.value=windHeight;<bragt;document.form 1.avail Width.value=windwindwidth;<οnresize=findDimensions;<bragt;<bragt;///>
ソースプログラムの解読
(1)プログラムはまず、ウィンドウの現在の幅と高さを表示するための2つのテキストボックスを含むフォームを作成し、その値はウィンドウサイズによって変化します.
(2)後続のJavaScriptコードでは、まず2つの変数windwidthとwindHeightを定義し、ウィンドウの高さ値と幅値を保存する.
(3)その後、関数findDimensions()において、window.innerHeightとwindow.innerWidthを用いてウィンドウの高さと幅を得て、両者を前述の2つの変数に保存する.
(4)Dcument内部に深く入り込んでbodyを検出し、ウィンドウサイズを取得し、前述の2つの変数に格納する.
(5)関数の最後に、名前でフォーム要素にアクセスした結果、2つのテキストボックスに出力します.
(6)JavaScriptコードの最後に、findDimensionsions()関数を呼び出して、全体の操作を完了します.
転載先:https://www.cnblogs.com/zhangq723/archive/2010/04/08/1707242.html

jsのnavigator対象