JavaScript_javascript のヒントで高さと幅の関数を取得する方法のまとめ

html コード:

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

& Lt; h3 & gt; これは親要素です。画面解像度は 1366*768 & lt;/h3 & gt;

                                                                                                                                                                                                                                                                   

                                                                                                                                                                                                                                   ＆lt; h3＆gt; 259280570 ＆lt; h3＆gt;＆lt;/h3＆gt;
へようこそ ＆lt; h3＆gt;ハッピーナショナルデイ＆lt;/h3＆gt;
                                                                                                                                                                                                                 

                                                                                                                                                                                                                                                                                                                                                     

CSS:

コードをコピーします

コードは次のとおりです:

* { マージン: 0 自動; } .お父さん { 幅: 500px;

高さ: 750px;

境界線: 5 ピクセルの赤一色;
float: left;
}
.son
{
幅: 400px;
高さ: 300px;
境界線: 5 ピクセルの黒一色;
マージン: 20px;
}
.孫
{
幅: 150px;
高さ: 100px;
境界線: 5 ピクセルの青一色;
マージン: 20px;
オーバーフロー: 自動;
}
.data
{
幅: 600px;
高さ: 750px;
境界線: 5 ピクセルの赤一色;
float: left;
マージン左: 15px;
}




js:

コードをコピー

コードは次のとおりです:

window.onload = function()
{
/*要素オブジェクトの取得*/
var Father = document.getElementById('father');
var Son = document.getElementById('son');
var grandson = document.getElementById('grandson');
var data = document.getElementById('data');
data.innerHTML = "

ウィンドウ サイズを取得します (ウィンドウ サイズに関連します)

";
data.innerHTML = "Document.body 表示領域の幅: " document.body.clientWidth "
";
data.innerHTML = "Document.body 表示領域の高さ: " document.body.clientHeight "
";
data.innerHTML = "window.innerWidth 表示領域の幅: " window.innerWidth "
";
data.innerHTML = "window.innerHeight 表示領域の高さ: " window.innerHeight "
";
data.innerHTML = "document.documentElement 表示領域の幅: " document.documentElement.clientWidth "
";
data.innerHTML = "document.documentElement 表示領域の高さ: " document.documentElement.clientHeight "
";
data.innerHTML = "

要素自体のサイズを取得します（スクロールバーの有無に関係なく）

";
data.innerHTML = ".son 自身の幅 (offsetWidth 属性、左右の境界線を含む):"son.offsetWidth "
";
data.innerHTML = ".son 自身の高さ (offsetHeight 属性、上下の境界線を含む):"son.offsetHeight "
";
data.innerHTML = ".son 視覚的な幅 (clientWidth 属性、左右の境界線を除く):"son.clientWidth "
";
data.innerHTML = ".son 視覚的な高さ (clientHeight 属性、上下の境界線を除く):"son.clientHeight "
";
data.innerHTML = "

Get.grandson のスクロール サイズと表示サイズ

";
data.innerHTML = ".grandson スクロール幅 (scrollWidth 属性):" grandson.scrollWidth "
";
data.innerHTML = ".grandson スクロール高さ (scrollHeight 属性):" grandson.scrollHeight "
";
data.innerHTML = ".grandson の視覚的な幅 (clientWidth 属性、垂直スクロール バーと境界線を除く):" grandson.clientWidth "
";
data.innerHTML = ".grandson の視覚的な高さ (clientHeight 属性、水平スクロール バーと境界線を除く):" grandson.clientHeight "
";
data.innerHTML = "

ロールアップされる .grandson のサイズを取得します (スクロール バーの位置に関連します)

";
data.innerHTML = ".孫がスクロールされる高さ (scrollTop 属性、垂直スクロール バーは下にスライドします):" grandson.scrollTop "
";
data.innerHTML = ".grandson は左にスクロールされます (scrollLeft 属性、水平スクロール バーは右端にスライドします):" grandson.scrollLeft "
";
data.innerHTML = "

ブラウザ ウィンドウの位置を取得します (ウィンドウ サイズに関連します)

";
/*
*IE、Chrome、Safari、Opera はすべて window.screenLeft と *window.screenTop をサポートしていますが、Firxfox はこれら 2 つの属性
をサポートしていません。 *Firxfox、Chrome、Safari、Opera はすべて window.screenX * と window.screenY をサポートしていますが、IE はこれら 2 つの属性
をサポートしていません。 */
var leftPos = (typeof window.screenLeft == 'number')?window.screenLeft:window.screenX;
var topPos = (typeof window.screenTop == 'number')?window.screenTop:window.screenY;
data.innerHTML = "本文ページのテキスト部分 (window.screenTop(Y)):" topPos "
";
data.innerHTML = "本文部分の左側 (window.screenLeft(X)):" leftPos "
";
data.innerHTML = "

画面解像度を取得

";
data.innerHTML = "画面解像度の高さ (window.screen.height):" window.screen.height "
";
data.innerHTML = "画面解像度の幅 (window.screen.width):" window.screen.width "
";
data.innerHTML = "

画面の利用可能な高さと幅を取得します

";
data.innerHTML = "画面解像度の高さ (window.screen.availHeight):" window.screen.availHeight "
";
data.innerHTML = "画面解像度の幅 (window.screen.availWidth):" window.screen.availWidth "
";
data.innerHTML = "

.fatherの境界線サイズを取得

";
data.innerHTML = ".father 上枠 (clientTop):" Father.clientTop "
";
data.innerHTML = ".father left border (clientLeft):" Father.clientLeft "
";
data.innerHTML = "

.son から親要素の境界線 (つまり、margin 親要素に対応する境界線) までの距離を取得します

";
data.innerHTML = ".son から親要素の上部境界 (offsetTop):"son.offsetTop "
";
data.innerHTML = ".son を親要素の左端まで (offsetLeft):"son.offsetLeft "
";
}

追記: ブラウザーによるボックスの解析方法には違いがあるため、上記で取得されるデータには多少の違いが生じる可能性があります。写真を添付し​​ます。

完全なコード:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html> 
<head> 
<meta charset="utf-8" /> 
<title>test</title> 
<style type="text/css">
	*
	{
		margin: 0 auto;
	}
	.father
	{
		width: 500px;
		height: 750px;
		border: 5px solid red;
		float: left;
	}
	.son
	{
		width: 400px;
		height: 300px;
		border: 5px solid black;
		margin: 20px;
	}
	.grandson
	{
		width: 150px;
		height: 100px;
		border: 5px solid blue;
		margin: 20px;
		overflow: auto;
	}
	.data
	{
		width: 600px;
		height: 750px;
		border: 5px solid red;
		float: left;
		margin-left: 15px;
	}
</style>
<script type="text/javascript">
	window.onload = function()
	{
		/*获取元素对象*/
		var father = document.getElementById('father');
		var son = document.getElementById('son');
		var grandson = document.getElementById('grandson');
		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.documentElement可见区域宽: "+document.documentElement.clientWidth+"<br/>";
		data.innerHTML += "document.documentElement可见区域高: "+document.documentElement.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取元素自身大小(跟是否有滚动条无关)</h3>";
		data.innerHTML += ".son自身宽度(offsetWidth属性，包括左右边框)："+son.offsetWidth+"<br/>";
		data.innerHTML += ".son自身高度(offsetHeight属性，包括上下边框)："+son.offsetHeight+"<br/>";
		data.innerHTML += ".son可视宽度(clientWidth属性，不包括左右边框)："+son.clientWidth+"<br/>";
		data.innerHTML += ".son可视高度(clientHeight属性，不包括上下边框)："+son.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson滚动大小和可视大小</h3>";
		data.innerHTML += ".grandson滚动宽度(scrollWidth属性)："+grandson.scrollWidth+"<br/>";
		data.innerHTML += ".grandson滚动高度(scrollHeight属性)："+grandson.scrollHeight+"<br/>";
		data.innerHTML += ".grandson可视宽度(clientWidth属性，不包括竖直滚动条和border)："+grandson.clientWidth+"<br/>";
		data.innerHTML += ".grandson可视高度(clientHeight属性，不包括水平滚动条和border)："+grandson.clientHeight+"<br/>";
		data.innerHTML += "<h3>获取.grandson被卷去的大小(跟滚动条的位置有关)</h3>";
		data.innerHTML += ".grandson被卷去的高(scrollTop属性，竖直滚动条滑到最底端)："+grandson.scrollTop+"<br/>";
		data.innerHTML += ".grandson被卷去的左(scrollLeft属性，水平滚动条滑到最右端)："+grandson.scrollLeft+"<br/>";
		data.innerHTML += "<h3>获取浏览器窗口位置(跟窗口大小有关)</h3>";
		/*
		*IE、Chrome、Safari、Opera 都提供了支持 window.screenLeft 和 *window.screenTop，但是Firxfox不支持这个两个属性；
		*Firxfox、Chrome、Safari、Opera 都提供了支持 window.screenX *和 window.screenY，但是 IE 不支持这个两个属性；
		*/
		var leftPos = (typeof window.screenLeft == 'number')&#63;window.screenLeft:window.screenX;
		var topPos = (typeof window.screenTop == 'number')&#63;window.screenTop:window.screenY;
		data.innerHTML += "body网页正文部分上(window.screenTop(Y))："+ topPos+"<br/>";
		data.innerHTML += "body网页正文部分左(window.screenLeft(X))："+ leftPos+"<br/>";
		data.innerHTML += "<h3>获取屏幕分辨率</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上边框(clientTop)："+ father.clientTop+"<br/>";
		data.innerHTML += ".father左边框(clientLeft)："+ father.clientLeft+"<br/>";
		data.innerHTML += "<h3>获取.son到父元素边界的距离(即对应margin+父元素对应的border)</h3>";
		data.innerHTML += ".son到父元素上边界(offsetTop)："+ son.offsetTop+"<br/>";
		data.innerHTML += ".son到父元素左边界(offsetLeft)："+ son.offsetLeft+"<br/>";
	}
</script>
</head> 
<body> 
	<div class="father" id="father">
		<h3>这是父元素，屏幕分辨率是1366*768</h3>
		<div class="son" id="son">
			<h3>这是子元素，祝大家国庆快乐 </h3>
			<div class="grandson" id="grandson">
				<h3>这是孙子元素，祝大家国庆快乐 </h3>
				<h3>我的博客:www.jb51.net</h3>
				<h3>程序爱好者QQ群:</h3>
				<h3>259280570 </h3>
				<h3>欢迎你加入 </h3>
				<h3>国庆快乐 </h3>
			</div>
		</div>
	</div>
	<div class="data">
		<h3>数据输出</h3>
		<div id="data"></div>
	</div>
</body> 
</html> 

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

レポ：チームメイトを復活させる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）

2週間前 By 尊渡假赌尊渡假赌尊渡假赌

ハローキティアイランドアドベンチャー：巨大な種を手に入れる方法

1 か月前 By 尊渡假赌尊渡假赌尊渡假赌

スプリットフィクションを打ち負かすのにどれくらい時間がかかりますか？

4週間前 By DDD

R.E.P.O.ファイルの保存場所：それはどこにあり、それを保護する方法は？

4週間前 By DDD

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？

7364

15

Java チュートリアル

1628

14

CakePHP チュートリアル

1353

52

Laravel チュートリアル

1265

25

PHP チュートリアル

1214

29

もっと見る