Javascrip{filter}t はページと画面サイズのパラメータを取得します

クズども · 掲載地 2018/07/03 16:54:42

Javascrip{filter}tは画面、ブラウザウィンドウ、ブラウザ、ウェブページの高さと幅のサイズを取得します

ウェブページの可視エリア:document.body.clientWidth(文書・本体・クライアント幅)
ウェブページの可視エリア:document.body.clientHeight
ウェブページの可視領域幅:document.body.offsetWidth(エッジの幅を含む)
ウェブページの見えるエリアの高さ:document.body.offsetHeight(エッジの幅を含む)
ウェブページの本文の全文幅:document.body.scrollWidth
ウェブページの全文は高く表示されています:document.body.scrollHeight
ページは高くスクロールされています:document.body.scrollTop
ページは左にスクロールします:document.body.scrollLeft
ウェブページの本文:window.screenTop
ウェブページの本文は左側です:window.screenLeft
高解像度:window.screen.height
画面解像度の幅:window.screen.width(ウィンドウ.スクリーン.width)
利用可能なワークスペースの画面高さ:window.screen.availHeight
利用可能なワークスペース幅:window.screen.availWidth(ウィンドウ.screen.availWidth)

jQueryはさまざまな幅と高さを扱います

ブラウザの閲覧エリア
$(window).height()
$(window).width()

ページのサイズ
$(document).height()
$(document).width()

現在のウィンドウ文書本体のサイズ
$(document.body).height()
$(document.body).width()

スクロールバーの縦高さ(つまりページが巻き上げられる高さ)
$(document).scrollTop()
$(document).scrollLeft()

HTMLの精密ターゲティング:scrollLeft、scrollWidth、clientWidth、offsetWidth
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX は文書の水平座標に対して相対的です
event.clientY は文書の垂直座標に対して相対的です
event.offsetX はコンテナの水平座標に対して相対的です
event.offsetY はコンテナの垂直座標に対して相対的です
document.documentElement.scrollTop の垂直スクロール用
event.clientX+document.documentElement.scrollTop 水平座標+文書に対する垂直スクロール量

つまり、FireFoxの違いは以下の通りです:

IE6.0、FF1.06+:

clientWidth = width + パディング

clientHeight = height + パディング

offsetWidth = 幅 + パディング + 境界線

offsetHeight = 高さ + パディング + ボーダー

IE5.0/5.5:
clientWidth = width - border

clientHeight = height - border

offsetWidth = 幅

offsetHeight = 高さ

(ちなみに、CSSのマージン属性はclientWidth、offsetWidth、clientHeight、offsetHeightとは関係ありません)

ウェブページの可視エリア:document.body.clientWidth(文書・本体・クライアント幅)
ウェブページの可視エリアの高さ:document.body.clientHeight
ウェブページの可視領域幅:document.body.offsetWidth(エッジの幅を含む)
ウェブ可視領域の高さ:document.body.offsetHeight(エッジの高さを含む)
ウェブページの全文幅:document.body.scrollWidth
全文のheight: document.body.scrollHeight
ページは高くスクロールされています:document.body.scrollTop
ページは左にスクロールします:document.body.scrollLeft
ウェブページの本文:window.screenTop
ウェブページの本文左側:window.screenLeft
高解像度:window.screen.height
画面解像度の幅:window.screen.width(ウィンドウ.スクリーン.width)
利用可能なワークスペースの画面高さ:window.screen.availHeight
利用可能なワークスペース幅:window.screen.availWidth(ウィンドウ.screen.availWidth)

div.style.top:divが位置する成分に対する最大距離

－－－－－－－－－－－－－－－－－－－

技術的ハイライト
このセクションのコードは主にウィンドウに関するドキュメントオブジェクトのプロパティを使い、それらのプロパティの主な機能と用途は以下の通りです。

ウィンドウのサイズを得るには、ブラウザごとに異なるプロパティや方法を使う必要があります。ウィンドウの真のサイズを検出するには、NetscapeのWindowプロパティを使う必要があります。 IEでは、遺体を検出するために文書の奥深くまで進む必要があります。 DOM環境では、ウィンドウのサイズを把握するには、要素ではなくルート要素のサイズに注意する必要があります。

ウィンドウオブジェクトのinnerWidthプロパティは、現在のウィンドウの内部幅を含みます。ウィンドウオブジェクトのinnerHeightプロパティには、現在のウィンドウの内部高さが含まれています。

ドキュメントオブジェクトのボディ属性はHTMLドキュメントのタグに対応します。ドキュメントオブジェクトのdocumentElementプロパティは、HTMLドキュメントのルートノードを表します。

document.body.clientHeight は、HTMLドキュメントが存在するウィンドウの現在の高さを示します。 document.body. clientWidth は、HTMLドキュメントが存在するウィンドウの現在の幅を表します。

ブラウザのサイズ調整イベント

window.onresize=funName; ブラウザサイズが変わったらfunName関数を呼び出します

[JavaScript] Javascrip{filter}t はページと画面サイズのパラメータを取得します

関連記事

閲覧したセクション