ホームページ > ウェブフロントエンド > H5 チュートリアル > ページ、ビジュアルエリア、画面などの幅と高さの属性を操作する方法。

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

php中世界最好的语言
リリース: 2018-06-04 11:50:50
オリジナル
2140 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート