js ブラウザの高さと幅の値を取得する（複数のブラウザ）

ホームページ

ウェブフロントエンド

jsチュートリアル

js ブラウザの高さと幅の値を取得する（複数のブラウザ）_JavaScript スキル

May 16, 2016 pm 06:47 PM

IE の場合:
document.body.clientWidth ==> BODY オブジェクトの幅
document.body.clientHeight ==>gt; BODY オブジェクトの高さ
document.documentElement.clientWidth == &gt ; 可視領域の幅
document.documentElement.clientHeight ==> 可視領域の高さ
FireFox の場合:
document.body.clientWidth ==> BODY オブジェクトの幅
document.body.clientHeight = = > BODY オブジェクトの高さ
document.documentElement.clientWidth ==> 可視領域の幅
document.documentElement.clientHeight ==> Opera の場合:
document.body.clientWidth = => 表示領域の幅
document.body.clientHeight ==> 表示領域の高さ
document.documentElement.clientWidth ==> ページオブジェクトの幅 (つまり、BODY オブジェクトの幅とマージンの幅)
document .documentElement.clientHeight ==> ページオブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
W3C 標準が定義されていない場合、
IE は次のようになります:
document.documentElement.clientWidth ==> 0
documentElement.clientHeight ==> 0
FireFox は次のとおりです:
documentElement.clientWidth ==>gt; )
document.documentElement .clientHeight ==> ページオブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)
オペラは次のとおりです:
document.documentElement.clientWidth ==> ページオブジェクトの幅 (つまり、 BODY オブジェクトの幅とマージンの幅)
document.documentElement.clientHeight ==> ページオブジェクトの高さ (つまり、BODY オブジェクトの高さとマージンの高さ)

Web ページの表示領域の幅: ドキュメント.body.clientWidth
Web ページの表示領域の高さ: document.body.clientHeight
Web ページの表示領域の幅: document.body.offsetWidth (端の幅を含む)
の高さWeb ページの表示領域: document.body.offsetHeight (端の高さを含む)
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: オブジェクトの左端とウィンドウ内に現在表示されているコンテンツの左端との間の距離を設定または取得します。
scrollTop: オブジェクトの最上端と最上端との間の距離を設定または取得しますウィンドウに表示されているコンテンツの
scrollWidth: オブジェクトのスクロール幅を取得します。
offsetHeight: レイアウトまたは offsetParent プロパティで指定された親座標を基準としたオブジェクトの高さを取得します。
offsetLeft: offsetParent プロパティで指定されたレイアウトまたは親座標を基準としたオブジェクトの高さ左位置を計算します
offsetTop: レイアウトまたは offsetTop 属性で指定された親座標を基準としたオブジェクトの計算された上部位置を取得します
events.clientX ドキュメントを基準とした水平座標
event.clientY ドキュメントを基準とした垂直座標
event.offsetX はコンテナを基準とした水平座標です
event.offsetY はコンテナを基準とした垂直座標ですコンテナ
document.documentElement.scrollTop は垂直スクロールの値です
event.clientX document.documentElement.scrollTop はドキュメントの水平位置を基準としています垂直方向の座標スクロール量
実装コード

コードをコピーしますコードは次のとおりです:

 
< !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>ブラウザ ウィンドウのサイズを変更してください&lt ; /title>メタ http-equiv="content-type" content="text/html; charset=gb2312"> 
<body> ><h2 align="center">ブラウザ ウィンドウのサイズを変更してください</h2><hr /> 
<form action="#" method="get" name="form1" id=" form1"> 
<!--ブラウザ ウィンドウの実際のサイズを表示--> 
ブラウザ ウィンドウの実際の高さ: <input type="text" name="availHeight" size = "4"/><br /> 
ブラウザ ウィンドウの実際の幅: <input type="text" name="availWidth" size="4"/><br /> 
</form> 
<script type="text/javascript"> 
<-- 
var winWidth = 0; 
 function findDimensions() //関数: サイズを取得
{ 
//ウィンドウ幅を取得
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; 
//Document の奥深くまで進んで本文を検出し、ウィンドウ サイズを取得します
 if ( document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 
{ 
winHeight = document.documentElement.clientHeight; 
winWidth = document.documentElement.clientWidth; >/ /結果は 2 つのテキスト ボックスに出力されます。 
document.form1.availWidth.value= winWidth; 
findDimensions(); >// 関数を呼び出して値を取得します 
window.onresize=findDimensions; 
</script> 
 html> 
 