Webページの可視領域幅:document.body.clientwidth
Webページの目に見える領域の高さ:document.body.clientheight
Webページの可視領域幅:document.body.offsetwidth(エッジラインの幅を含む)
Webページの目に見える領域の高さ:document.body.offseTheigh(エッジラインの幅を含む)
Webページの全文幅:document.body.scrollwidth
Webページの全文:document.body.scrollheight
Webページは高レベルで展開されています:document.body.scrolltop
展開されているWebページの左:document.body.scrollleft
Webページの主要部分:window.screentop
Webページのメインテキストの左:window.screenleft
高画面解像度:window.screen.height
画面解像度の幅:window.screen.width
画面利用可能なワークスペースの高さ:window.screen.availheight
画面利用可能なワークスペース幅:window.screen.availwidth
HTML正確な位置決め:ScrollLeft、ScrollWidth、ClientWidth、OffsetWidth
Scrollheight:オブジェクトのスクロールの高さを取得します。
ScrollLeft:オブジェクトの左の境界と、ウィンドウ内の現在表示されているコンテンツの左端の間の距離を設定または取得します
スクロールトップ:オブジェクトの上部とウィンドウ内の可視コンテンツの上部との間の距離を設定または取得します
scrollwidth:オブジェクトのスクロール幅を取得します
offseTheight:レイアウトまたは親座標によって指定された親座標に対するオブジェクトの高さを取得しますoffsetparentプロパティ
offsetLeft:オフセットParentプロパティによって指定されたレイアウトまたは親座標に対するオブジェクトの計算された左の位置を取得します
オフセット:オフセットプロパティで指定されたレイアウトまたは親座標に対するオブジェクトの計算されたトップ位置を取得します
event.clientxドキュメントに対する水平座標
ドキュメントに対するClienty垂直座標
event.offsetxコンテナに対する水平座標
event.offsetyコンテナに対する垂直座標
document.documentlement.scrolltop垂直にスクロールする値
event.clientx + document.documentlement.scrolltopドキュメントの水平座標 +垂直方向のスクロールの量
つまり、Firefoxの違いは次のとおりです。
IE6.0、FF1.06+:
clientWidth =幅 +パディング
clientheight = height + padding
offsetWidth =幅 +パディング +ボーダー
offsetheight = height + padding + border
IE5.0/5.5:
clientWidth = width -border
clientheight = height -border
offsetWidth = width
offseetheight = height
(CSSのマージン属性は、clientWidth、offsetWidth、、clientheight、およびoffseightとは何の関係もないことに言及する必要があります)
--------------------------
技術的なハイライト
このセクションのコードは、主にウィンドウに関するドキュメントオブジェクトの一部のプロパティを使用します。
ウィンドウサイズを取得するには、さまざまなブラウザに使用する必要があります。ウィンドウの真のサイズを検出するには、Netscapeの下のウィンドウ属性を使用する必要があります。ボディ; DOM環境では、ウィンドウのサイズを取得したい場合は、要素ではなく、ルート要素のサイズに注意を払う必要があります。
ウィンドウオブジェクトの内側幅プロパティには、現在のウィンドウの内部幅が含まれています。ウィンドウオブジェクトの内側のプロパティには、現在のウィンドウの内部高さが含まれています。
ドキュメントオブジェクトのボディ属性は、HTMLドキュメントのタグに対応しています。ドキュメントオブジェクトのDocumentRementプロパティは、HTMLドキュメントのルートノードを表します。
document.body.clientheightは、HTMLドキュメントが配置されているウィンドウの現在の高さを表します。 document.body.clientWidthは、HTMLドキュメントが存在するウィンドウの現在の幅を表します。
実装コード<! - - - - 、、、 - - - - 、、、、、、、、、、、、、、、、、、、、、、... - - - - - - - - - 、 - - - - - - - 、、、、、、、、、、、、...
コードコピーは次のとおりです。
<!doctype html public " - // w3c // dtd xhtml 1.0 transitional // en"
"http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<Title>ブラウザウィンドウを調整してください</title>
<meta http-equiv = "content-type" content = "text/html; charset = gb2312">
</head>
<body>
<h2 align = "center">ブラウザウィンドウサイズを調整してください</h2> <hr>
<form action = "#" method = "get" name = "form1" id = "form1">
<!ブラウザウィンドウの実際のサイズを表示します>
ブラウザウィンドウの実際の高さ:<入力タイプ= "テキスト" name = "availheight" size = "4"> <br>
ブラウザウィンドウの実際の幅:<入力タイプ= "テキスト" name = "availwidth" size = "4"> <br>
</form>
<script type = "text/javascript">
<!
var winwidth = 0;
var winheight = 0;
関数finddimensions()// function:dimensionsを取得します
{
//ウィンドウの幅を取得します
if(window.innerwidth)
winwidth = window.innerwidth;
else if((document.body)&&(document.body.clientwidth)))
winwidth = document.body.clientwidth;
//ウィンドウの高さを取得します
if(window.innerheight)
winheight = window.innerheight;
else if((document.body)&&(document.body.clientheight)))
winheight = document.body.clientheight;
//ドキュメントの奥深くにボディを検出して、ボディサイズを取得して、ウィンドウサイズをクリックします
if(document.documentelement && document.documentelement.clientheight && document.documentelement.clientWidth)
{
winheight = document.documentelement.clientheight;
winwidth = document.documentelement.clientWidth;
}
//結果は2つのテキストボックスに出力されます
document.form1.availheight.value = winheight;
document.form1.availwidth.value = winwidth;
}
finddimensions();
//値を取得するために関数を呼び出します
window.onresize = indimensions;
///
</script>
</body>
</html>
ソースプログラムの解釈
(1)プログラムは、最初にウィンドウの現在の幅と高さを表示する2つのテキストボックスを含むフォームを作成し、その値はウィンドウサイズの変更とともに変化します。
(2)その後のJavaScriptコードでは、ウィンドウの高さと幅の値を保存するために、2つの変数winwidthとwinheightが最初に定義されています。
(3)次に、関数FindDimensions()で、window.innerheightとwindow.innerwidthを使用して、ウィンドウの高さと幅を取得し、両方を上記の2つの変数に保存します。
(4)次に、ドキュメントに深く入り、本体を検出し、ウィンドウサイズを取得し、上記の2つの変数に保存することにより。
(5)関数の最後で、結果は名前でフォーム要素にアクセスすることにより、2つのテキストボックスに出力されます。
(6)JavaScriptコードの最後に、findDimensions()関数を呼び出すことにより、操作全体を完了します。