javascriptはブラウザウィンドウ、スクリーン、ウェブページの高さ、幅などを取得して判断します.
4848 ワード
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.documentElement.scrollTopは、ドキュメントの水平座標+垂直方向にスクロールする量IEに対して、FireFoxの違いは以下の通りである:IE 6.0、FF 1.06＋:
技術上のポイント
このセクションのコードは主に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ドキュメントのあるウィンドウの現在の幅を表します.
サンプルコード
(1)プログラムはまず、ウィンドウの現在の幅と高さを表示するための2つのテキストボックスを含むフォームを作成し、その値はウィンドウサイズによって変化します.(2)後続のJavaScriptコードでは、まず2つの変数windwidthとwindHeightを定義し、ウィンドウの高さ値と幅値を保存する.(3)その後、関数findDimensions()において、window.innerHeightとwindow.innerWidthを用いてウィンドウの高さと幅を得て、両者を前述の2つの変数に保存する.(4)Dcument内部に深く入り込んでbodyを検出し、ウィンドウサイズを取得し、前述の2つの変数に格納する.(5)関数の最後に、名前でフォーム要素にアクセスした結果、2つのテキストボックスに出力します.(6)JavaScriptコードの最後に、findDimensionsions()関数を呼び出して、全体の操作を完了します.
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width �C border
clientHeight = height �C border
offsetWidth = width
offsetHeight = height
技術上のポイント
このセクションのコードは主に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ドキュメントのあるウィンドウの現在の幅を表します.
サンプルコード
<br/>
<br/>
<br> < !--
<br> var winWidth = 0;
<br> var winHeight = 0;
<br> function findDimensions() // ：
<br> {
<br> //
<br> if (window.innerWidth) winWidth = window.innerWidth;
<br> else if ((document.body) && (document.body.clientWidth)) winWidth = document.body.clientWidth;
<br> //
<br> if (window.innerHeight) winHeight = window.innerHeight;
<br> else if ((document.body) && (document.body.clientHeight)) winHeight = document.body.clientHeight;
<br> // Document body ，
<br> if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
<br> winHeight = document.documentElement.clientHeight;
<br> winWidth = document.documentElement.clientWidth;
<br> }
<br> //
<br> document.form1.availHeight.value = winHeight;
<br> document.form1.availWidth.value = winWidth;
<br> }
<br> findDimensions();
<br> // ，
<br> window.onresize = findDimensions;
<br> //-->
<br>
(1)プログラムはまず、ウィンドウの現在の幅と高さを表示するための2つのテキストボックスを含むフォームを作成し、その値はウィンドウサイズによって変化します.(2)後続のJavaScriptコードでは、まず2つの変数windwidthとwindHeightを定義し、ウィンドウの高さ値と幅値を保存する.(3)その後、関数findDimensions()において、window.innerHeightとwindow.innerWidthを用いてウィンドウの高さと幅を得て、両者を前述の2つの変数に保存する.(4)Dcument内部に深く入り込んでbodyを検出し、ウィンドウサイズを取得し、前述の2つの変数に格納する.(5)関数の最後に、名前でフォーム要素にアクセスした結果、2つのテキストボックスに出力します.(6)JavaScriptコードの最後に、findDimensionsions()関数を呼び出して、全体の操作を完了します.