JSは幅高さのWeb、ブラウザ、ウィンドウの画面サイズのブラウザの入手へのアクセスを

2010年1月27日カテゴリーSLJ |: HTML / CSSのJavascriptを | コメント無し フォントサイズ: 単3形 単3形

ページは、地域全体を示しています:document.body.clientWidth
ページは、地域高を示しています:document.body.clientHeight
ページは、地域全体を示しています:document.body.offsetWidth(幅のエッジを含む)
ページは、地域高を示しています:document.body.offsetHeight(幅のエッジを含む)
ページの幅のフルボディ:document.body.scrollWidth
ページ内本文テキストは高:document.body.scrollHeight
ページが高描画する:document.body.scrollTopを
ページが左に描画する:document.body.scrollLeft
一部のWebページのテキスト:window.screenTop
左のHTML本体:window.screenLeft
高画面解像度:] [譎
画面解像度ワイド:window.screen.width
高さの画面の作業領域利用可能:window.screen.availHeight
画面の作業領域利用可能な幅:window.screen.availWidth

HTMLの正確な位置決め:scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollHeightは:オブジェクトが圧延高をゲット。
scrollLeft:セットまたは左余白内のオブジェクトとのウィンドウの内容を取得して左端の間の現在の距離を示しています
scrollTop:セットまたは最上位オブジェクトで取得し、ウィンドウの内容の上部間の距離を示しています
scrollWidth:オブジェクトは圧延の幅を取得する
offsetHeightは:レイアウトに相対的なオブジェクトを取得または親offsetParent属性を座標親の高さを指定
offsetLeftは:レイアウトに相対的なオブジェクトを取得または親offsetParentプロパティを座標計算の左側の位置を指定する
offsetTopは:レイアウトに相対的なオブジェクトを取得または親のoffsetTopの属性を調整する最上位の計算を指定します。
event.clientXは、ドキュメントの相対レベルを調整する
event.clientYは相対的な垂直文書の座標
event.offsetXは、コンテナの相対レベルを調整する
event.offsetY垂直方向の相対的なコンテナの座標
垂直スクロールの値document.documentElement.scrollTop
文書のevent.clientX +のdocument.documentElement.scrollTop相対レベルは、垂直スクロールの量を検索する座標
IEは、Firefoxの違いは次のとおりです:

バージョンのブラウザー、FF1.06 +:

clientWidth =幅+パディング

clientHeightを=高さ+パディング

offsetWidth =幅+パディング+ボーダー

offsetHeight =高さ+パディング+ボーダー

IE5.0/5.5:
clientWidth =幅 - 国境

clientHeightを=高さ - 国境

offsetWidth =幅

offsetHeight =高さ

(必要に言及する:マージンのプロパティでCSS、およびclientWidth、offsetWidth、clientHeightを、offsetHeight関連していない)

ページは、地域全体を示しています:document.body.clientWidth
ページは、地域高示しています:document.body.clientHeight
ページは、地域全体を示しています:document.body.offsetWidth(幅のエッジを含む)
ページは、地域高を示しています:document.body.offsetHeight(高のエッジを含む)
ページの幅のフルボディ:document.body.scrollWidth
ページ内本文テキストは高:document.body.scrollHeight
ページが高描画する:document.body.scrollTopを
左のページにボリュームがある:document.body.scrollLeft
このページの本文:window.screenTop
左のHTML本体:window.screenLeft
高画面解像度:] [譎
画面解像度ワイド:window.screen.width
利用可能な作業領域画面の高さ:window.screen.availHeight
画面の作業領域利用可能な幅:window.screen.availWidth

-------------------

テクニックは、Documentオブジェクトコードのこのセクションのメインウィンドウで使用される、いくつかの主な機能と使用されるプロパティです。

ウィンドウのサイズを取得するには、別のブラウザの、Netscapeのプロパティで必要ウィンドウを使用してあるウィンドウの真のサイズを検出する別のプロパティとメソッド:使用する必要があります。本文内のドキュメントの下でIEは綿密なテストが必要です。のDOMの環境では、ルート要素のサイズではなく、要素に注意を払う必要があるウィンドウのサイズを取得します。

ウィンドウがinnerWidthプロパティをオブジェクトの現在のウィンドウの内部の幅が含まれます。 ウィンドウがinnerHeightプロパティをオブジェクトの現在のウィンドウの内部の高さを含んでいます。

対応するHTML文書のbodyタグのDocumentオブジェクトのプロパティ。 のDocumentオブジェクトのdocumentElementプロパティは、HTMLのドキュメントルートを述べた。

document.body.clientHeight HTMLドキュメントは、ウィンドウここで現在の高さ。 はdocument.body。clientWidth HTMLドキュメントは、ウィンドウの現在の幅がある。

実装コード

  1
             2
             3
             4
             5
             6
             7
             8
             9
             10
             11
             12
             13
             14
             15
             16
             17
             18
             19
             20
             21
             22
             23
             24
             25
             26
             27
             28
             29
             30
             31
             32
             33
             34
             35
             36
             37
             38
             39
             40
             41
             42
             43
             44
             45
             46
             47
             48 
 <!DOCTYPEはhtmlの公共" - / / W3Cの/ / DTDはXHTML 1.0 Transitionalを/ / EN"を"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd~~V"> <htmlのxmlns属性は、=が"http :/ / www.w3.org/1999/xhtml">の<head>の<title>してください<を調整するブラウザのウィンドウ/タイトル> <メタのhttp - equiv ="content - typeが"コンテンツ="テキスト/ HTML形式;文字= 2312 "> </メタ> </ヘッド>の名前を取得"の<body>"<h2 align="center">をしてください調整お使いのブラウザウィンドウのサイズを</ H2は> <hr /> <フォームでaction ="#"メソッド=" Form1が"番号="Form1が"> <が! - brのブラウザのサイズを示しています実際のウィンドウ<高さを実際の- >ブラウザのウィンドウ:<inputのtype="text" name="availHeight" size="4"/> / <ブラウザの幅を>実際のウィンドウ:<inputのtype="text" name="availWidth" size="4"/> <br /> <はtype="text/javascript"> /形成> <scriptを! -ヴァールwinWidth = 0;ヴァールwinHeight = 0;関数findDimensions()/ /機能:window.innerWidth =取得サイズ(winWidth(window.innerWidth)/ /取得するウィンドウの幅をする場合、他の場合は((document.bodyの)&&(document. body.clientWidth))winWidth = document.body.clientWidthは/ / window.innerHeightウィンドウの高さをする場合(window.innerHeight)winHeight =取得;他の場合は((document.bodyのを)&&(document.body.clientHeight))winHeight =ドキュメント。body.clientHeight / /ドキュメント本体内のテストを通じて、深さは、ウィンドウへのアクセスはサイズが(document.documentElementを&document.documentElement.clientHeight&document.documentElement.clientWidth)(winHeight = document.documentElement.clientHeight; winWidth =ドキュメント。 documentElement.clientWidth;)/テキストボックスのdocument.form1.availHeight.value 2 /結果の出力に= winHeight; document.form1.availWidth.value = winWidth;)findDimensions(); / /取得window.onresize =呼び出す関数を、値findDimensionsは; //--> </スクリプト>の</本体は> </ htmlの> 

ソースはだ

(1)プログラムの最初のウィンドウの現在の幅と高さを表示するには2つのテキストボックスを含むフォームを設立し、その値をウィンドウのサイズ変更と変更されます。

(2)以下のJavaScriptコードの最初のwinWidth、2つの変数を定義し、winHeight、ウィンドウの高さの値と幅の値保存するために使用されます。

(3)次に、関数findDimensions()で、使用window.innerWidthのwindow.innerHeightと、ウィンドウの高さと幅を取得する2つの前2つの変数に保存。

(4)ドキュメントと体内の詳細なテストにより、ウィンドウのサイズを取得し、上記の2つの変数に格納されます。

(5)最後に、名前で、2つのテキストボックスに結果の出力をフォーム要素にアクセスするための関数です。

(6)最後に、呼び出し元のfindDimensions()関数によって、操作を完了するためのJavaScriptコードです。

関連記事/関連記事

コメントを残す:

*
*
*
*
↑トップへ