ホーム>Web デザインのチュートリアル>JavaScript チュートリアル

JavaScriptの高さと幅関数の概要

著者：Eve Cole 更新時間：2025-04-14 17:48:02

HTMLコード：

コードコピーは次のとおりです。

<body>

<div id = "父">

<h3>これは親要素であり、画面解像度は1366*768 </h3>です

<div id = "son">

<h3>これは子供の要素です、私は皆さんが幸せな国民の日を願っています</h3>

<div id = "grandson">

<h3>これは孫の要素です、私は皆さんが幸せな国民の日を願っています</h3>

<h3>私のブログ：www.vevb.com </h3>

<H3>プログラム愛好家QQグループ：</h3>

<H3> 259280570 </h3>

<h3>参加</h3>へようこそ

<h3>ハッピーナショナルデー</h3>

</div>

</div>

</div>

<div>

<h3>データ出力</h3>

<div id = "data"> </div>

</div>

</body>

CSS：

コードコピーは次のとおりです。

*

{

マージン：0 Auto;

}

。父親

{

幅：500px;

高さ：750px;

国境：5px固体赤;

フロート：左;

}

。息子

{

幅：400px;

高さ：300px;

境界線：5pxソリッドブラック。

マージン：20px;

}

。孫

{

幅：150px;

高さ：100px;

ボーダー：5pxソリッドブルー。

マージン：20px;

オーバーフロー：自動;

}

。データ

{

幅：600px;

高さ：750px;

国境：5px固体赤;

フロート：左;

マージン左：15px;

}

JS：

コードコピーは次のとおりです。

window.onload = function（）

{

/*要素オブジェクトを取得*/

var父= document.getElementById（ '父'）;

var son = document.getElementById（ 'Son'）;

var grandson = document.getElementById（ 'Gradson'）;

var data = document.getElementById（ 'data'）;

data.innerhtml = "<h3>ウィンドウサイズ（ウィンドウサイズに関連）を取得</h3>";

data.innerhtml+= "document.body可視領域幅："+document.body.clientwidth+"<br/>";

data.innerhtml+= "document.body可視領域の高さ："+document.body.clientheight+"<br/>";

data.innerhtml+= "window.innerwidth可視面積幅："+window.innerwidth+"<br/>";

data.innerhtml+= "window.innerheight可視領域の高さ："+window.innerheight+"<br/>";

data.innerhtml+= "document.documentlement可視領域幅："+document.documentelement.clientwidth+"<br/>";

data.innerhtml+= "document.documentlement可視領域の高さ："+document.documentelement.clientheight+"<br/>";

data.innerhtml += "<h3>は、要素のサイズを取得します（スクロールバーがあるかどうかに関係していません）</h3>";

data.innerhtml+= ".son独自の幅（左と右の境界を含むoffsetWidthプロパティ）："+son.OffsetWidth+"<br/>";

data.innerhtml+= ".son独自の高さ（上限と下の境界を含むオフセイスプロパティ）："+son.offsetheight+"<br/>";

data.innerhtml+= ".son Visual width（clientWidth属性、左右の境界を除く）："+son.clientwidth+"<br/>";

data.innerhtml+= ".son Visual Height（clientheightプロパティ、上部および下の境界線を除く）："+son.clientheight+"<br/>";

data.innerhtml += "<h3> gets.gradsonスクロールサイズと視覚サイズ</h3>";

data.innerhtml+= ".gradson scroll width（scrollwidthプロパティ）："+gradson.scrollwidth+"<br/>";

data.innerhtml+= ".gradson scroll height（scrollheightプロパティ）："+gradson.scrollheight+"<br/>";

data.innerhtml+= ".gradson Visual width（clientWidthプロパティ、垂直スクロールバーとボーダーを除く）："+gradson.clientWidth+"<br/>";

data.innerhtml+= ".gradson Visual Height（clientheightプロパティ、水平スクロールバーとボーダーを除く）："+gradson.clientheight+"<br/>";

data.innerhtml += "<h3> rolled .gradson（スクロールバーの位置に関連）のサイズを取得します</h3>";

data.innerhtml+= ".gradsonは高く転がります（スクロールトッププロパティ、垂直スクロールバースライドが下部にスライド）："+gradson.scrolltop+"<br/>";

data.innerhtml+= ".gradsonは左から転がります（scrollleftプロパティ、水平スクロールバースライドが右端にスライドします）："+gradson.scrollleft+"<br/>";

data.innerhtml += "<h3>ブラウザウィンドウの場所（ウィンドウサイズに関連）</h3>";

/*

*IE、Chrome、Safari、およびOperaはすべてWindow.screenLeftと *Window.screentopのサポートを提供しますが、FirxFoxはこれら2つのプロパティをサポートしていません。

* Firxfox、Chrome、Safari、およびOperaはすべてwindow.screenx *およびwindow.creenyをサポートしていますが、IEはこれら2つのプロパティをサポートしていません。

*/

var leftpos =（typeof windof.screenleft == 'number'）？window.screenleft：window.screenx;

var toppos =（typeof windof.screentop == 'number'）？window.screentop：window.screeny;

data.innerhtml+= "ボディページボディパート（window.screentop（y））："+toppos+"<br/>";

data.innerhtml+= "body webページボディテキスト左（window.screenleft（x））："+leftpos+"<br/>";

data.innerhtml += "<h3> get画面解像度</h3>";

data.innerhtml+= "高画面解像度（window.screen.height）："+window.screen.height+"<br/>";

data.innerhtml+= "画面解像度の幅（window.screen.width）："+window.screen.width+"<br/>";

data.innerhtml += "<h3>画面で利用可能な高さと幅を取得</h3>";

data.innerhtml+= "高画面解像度（window.screen.availheight）："+window.screen.availheight+"<br/>";

data.innerhtml+= "画面解像度の幅（window.screen.availwidth）："+window.screen.availwidth+"<br/>";

data.innerhtml += "<h3> father </h3>の境界サイズを取得します";

data.innerhtml+= ".father upperborder（clienttop）："+father.clienttop+"<br/>";

data.innerhtml+= ".Father Left Border（clientLeft）："+father.clientleft+"<br/>";

data.innerhtml + = "<h3>。

data.innerhtml+= ".son親要素の上の境界（オフセット）："+son.offsettop+"<br/>";

data.innerhtml+= ".son親要素の左境界（offsetLeft）："+son.offsetleft+"<br/>";

}

PS：ブラウザのボックスの分析には違いがあるため、上記のデータには小さな違いがあります。添付の写真。

完全なコード：

 <！doctype html public " -  // w3c // dtd html 4.01 transitional // en" "http://www.w3.org/tr/html4/loose.dtd"> <html> <head> <meta charset = "utf-8"/> <タイトル> <タイトル> </cs " auto;}。父{幅：500px;高さ：750px;境界：5px固体赤; float：左;}。son {width：400px; height：300px; border：5px solid black; margin：20px;}。 Auto;}。データ{width：600px; height：750px; border：5px solid red; float：float：margin-left：15px;} </style> <script type = "text/javascript"> window.onload（）{/*get element object*/var fath = document.getelementyid（ 'farn'）; document.getElementById（ 'gradson'）; var data = document.getElementById（ 'data'）; data.innerhtml = "<h3>ウィンドウサイズ（ウィンドウサイズに関連）</h3>"; data.innerhtml += "document.body visibleエリア幅：" +document.body.body +"<br/高さ： "+document.body.clientheight+" <br/> "; data.innerhtml+=" innerwidth可視面積幅： "+window.innerwidth+" <br/> "; data.innerhtml+=" "document.documentelement可視領域幅："+document.documentelement.clientwidth+"<br/>"; data.innerhtml+= "document.documentelement可視領域の高さ："+document.documentelement.clientheight+"<br/>" bar）</h3> "; data.innerhtml +=" .son独自の幅（左と右の境界を含むoffsetwidth属性）： " +son.offsetwidth +" <br/> "; data.innerhtml +="。 "+son.offseTheight+" <br/> "; data.innerhtml+=" .sonの可視幅（左右の境界を含むクライアントウィッド属性）： "+son.clientwidth+" <br/> "; data.innerhtml+=" .son visible height（clientheight property、 "+son.clientheight+" <br/> "; data.innerhtml+=" <h3> get .gradsonスクロールサイズと可視サイズ</h3> "; data.innerhtml+="。 （Scrollheight Property）： "+gradson.scrollheight+" <br/> "; data.innerhtml+="。スクロールバーとボーダー）： " +grandson.clientheight +" <br/> "; data.innerhtml +=" <h3>。 "+grandson.scrolltop+" <br/> "; data.innerhtml+="。grandsonは左に巻き上げられます（scrollleftプロパティ、水平スクロールバースライドスライドスライド）： "+grandson.scrollleft+" <br/> "; data.innerhtml+=" size）</h3> ";/** ie、chrome、safari、operaはすべてwindow.screenleftおよび*window.screentopのサポートを提供しますが、Firxfoxはこれら2つのプロパティをサポートしていません。 * FirxFox、Chrome、Safari、Operaはどちらもwindow.screenx *とwindow.screenyのサポートを提供しますが、IEはこれらの2つのプロパティをサポートしていません。 */var leftpos =（typeof windof.screenleft == 'number'）？window.screenleft：window.screenx; var toppos =（typeof windof.screentop == 'number'）？window.screeny; data.innerhtml += " Toppos+"<br/>"; data.innerhtml+= "ボディWebページボディテキストパーツ左（window.screenleft（x））："+leftpos+"<br/>"; data.innerhtml+= "<h3> get screen resolution </h3>"; data.innerhtml+= Window.screen.heigh +"<br/>"; data.innerhtml += "画面解像度の幅（window.screen.width）：" +window.screen.width +"<br/>"; data.innerhtml += "<h3> get screen </h3>"; data.innerhtml += " （window.screen.availheight）： "+window.screen.availheight+" <br/> "; data.innerhtml+="画面解像度の幅（window.screen.availwidth）： "+window.screen.availwidth+" <br/> " .father </h3> "; data.innerhtml+=" .father upperborder（clienttop）： "+father.clienttop+" <br/> "; data.innerhtml+="。縁は、マージン+親要素に対応する境界線）</h3> "; data.innerhtml+="。 son.offsetLeft+"<br/>";} </script> </head> <body> <div id = "父"> <h3>これは親要素です。画面解像度は1366*768 </h3> <div id = "son"> <h3>これは子供の要素です。 day </h3> <h3>私のブログ：www.vevb.com </h3> <h3>プログラム愛好家QQグループ：</h3> <h3> 259280570 </h3> <h3>歓迎id = "data"> </div> </div> </body> </html>
関連記事