ページ、ビジュアルエリア、画面などの幅と高さの属性を操作する方法。

今回は、ページ、表示可能領域、画面の幅と高さ属性を操作する方法を説明します。ページ、表示可能領域、画面の幅と高さの属性を操作するときの注意事項とは何ですか。 . 次に実際のケースを見てみましょう。 ページ、ビジュアルエリア、画面などの関連する幅と高さの属性について

function size(){
	document.write(
	"屏幕分辨率为："+screen.width+"*"+screen.height
	+"<br />"+
	"屏幕可用大小："+screen.availWidth+"*"+screen.availHeight
	+"<br />"+
	"网页可见区域宽："+document.body.clientWidth
	+"<br />"+
	"网页可见区域高："+document.body.clientHeight
	+"<br />"+
	"浏览器窗口宽："+document.documentElement.clientWidth
	+"<br />"+
	"浏览器窗口高："+document.documentElement.clientHeight
	+"<br />"+
	"html所有元素宽："+document.documentElement.offsetWidth
	+"<br />"+
	"html所有元素高："+document.documentElement.offsetHeight
	+"<br />"+
	"网页可见区域宽(包括边线的宽)："+document.body.offsetWidth 
	+"<br />"+
	"网页可见区域高(包括边线的宽)："+document.body.offsetHeight 
	+"<br />"+
	"网页正文全文宽："+document.body.scrollWidth
	+"<br />"+
	"网页正文全文高："+document.body.scrollHeight
	+"<br />"+
	"网页被卷去的高："+document.body.scrollTop
	+"<br />"+
	"网页被卷去的左："+document.body.scrollLeft
	+"<br />"+
	"网页正文部分上："+window.screenTop
	+"<br />"+
	"网页正文部分左："+window.screenLeft
	+"<br />"+
	"屏幕分辨率的高："+window.screen.height
	+"<br />"+
	"屏幕分辨率的宽："+window.screen.width
	+"<br />"+
	"屏幕可用工作区高度："+window.screen.availHeight
	+"<br />"+
	"屏幕可用工作区宽度："+window.screen.availWidth
	);
}

さらに、次のような HTML dom 要素の位置とサイズに関する属性がいくつかあります

offsetWidth クライアント幅スクロール幅オフセット高さoffsetLeft offsetTop

1. clientHeight と clientWidth は要素の内部サイズを記述するために使用されます。これは、要素のコンテンツ + 内部マージン (実際には IE の下の を含む)、 外部マージン を指します。スクロールバー部分

2. offsetHeight と offsetWidth は要素の外側のサイズを記述するために使用されます。これは、外側のマージンとスクロールバー部分を除いた、要素のコンテンツ + パディング + ボーダーを指します

3 clientTop と clientLeft はレベルを返します。パディングの端と境界線の外端の間の距離と垂直方向の距離、つまり左端と上の境界線の幅

4. offsetTop と offsetLeft は要素の左上隅 (境界線 外端 ) の間の距離を表します。 配置された親コンテナー (offsetParent オブジェクト) の左上隅

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。 ！

推奨読書:

H5+Canvasの使用例の詳細な説明

JavaScriptのDate Formatメソッドの使用方法

クライアント高さ	スクロール高さ
clientLeft	scrollLeft
clientTop	scrollTop

以上がページ、ビジュアルエリア、画面などの幅と高さの属性を操作する方法。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。