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の下でウィンドウ属性を使用する必要があります。 IEで体を検出する。ウィンドウサイズを取得するには、要素ではなく、ルート要素のサイズに注意を払う必要があります。
ウィンドウオブジェクトの内側幅プロパティには、現在のウィンドウの内部幅が含まれています。ウィンドウオブジェクトの内側のプロパティには、現在のウィンドウの内部高さが含まれています。
ドキュメントオブジェクトのボディ属性は、HTMLドキュメントのタグに対応しています。ドキュメントオブジェクトのDocumentRementプロパティは、HTMLドキュメントのルートノードを表します。
document.body.clientheightは、HTMLドキュメントが配置されているウィンドウの現在の高さを表します。 document.body.clientWidthは、HTMLドキュメントが存在するウィンドウの現在の幅を表します。
さまざまなブラウザで目に見えるウィンドウのサイズを取得することに関する少しの調査。
私のローカルテストでは、IE、Firefox、およびOperaで使用できます
document.body.clientWidth
document.body.clientheightを取得できます。非常にシンプルで便利です。
会社のプロジェクトでは、オペラは引き続き使用されています
document.body.clientWidth
document.body.clientheight
しかし、IEとFirefoxの使用
document.documentelement.clientWidth
document.documentelement.clientheight
W3C標準が問題を引き起こしていることがわかりますhttp://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd ">
この行をページに追加する場合
IE:document.body.clientWidth ==>ボディオブジェクト幅
document.body.clientheight ==>ボディオブジェクトの高さ
document.documentelement.clientwidth ==>可視領域幅
document.documentelement.clientheight ==>可視領域の高さ
firefox:document.body.clientwidth ==>ボディオブジェクト幅
document.body.clientheight ==>ボディオブジェクトの高さ
document.documentelement.clientwidth ==>可視領域幅
document.documentelement.clientheight ==>目に見える領域の高さ?
Opera:document.body.clientwidth ==>可視領域の幅
document.body.clientheight ==>目に見える領域の高さ
document.documentelement.clientwidth ==>ページオブジェクト幅(つまり、ボディオブジェクト幅とマージン幅)document.documentelement.clientheight ==>ページオブジェクトの高さ(つまり、ボディオブジェクトの高さとマージンの高さ)
W3Cの標準がない場合、
ie:document.documentelement.clientwidth ==> 0
document.documentelement.clientheight ==> 0
firefox is:document.documentelement.clientwidth ==>ページオブジェクト幅(つまり、ボディオブジェクト幅とマージン幅)
document.documentelement.clientheight ==>ページオブジェクトの高さ(つまり、ボディオブジェクトの高さとマージンの高さ)
Opera is:document.documentelement.clientwidth ==>ページオブジェクト幅(つまり、ボディオブジェクト幅とマージン幅)
document.documentelement.clientheight ==>ページオブジェクトの高さ(つまり、ボディオブジェクトの高さとマージンの高さ)
それは本当に面倒です。実際、フロントエンドの設計と開発の観点からは、最新の標準を使用しないよりも、オブジェクトと方法を少なくする方が良いです。しかし、あなたがトレンドに追いつくことができないなら、あなたは決して上級デザイナーになることはないので、私たちはまだこの知識を理解し、習得する必要があります。