JavaScriptはブラウザ、screenとelementの幅の高さを取得します.
3452 ワード
window
1、
window.inner Width/inner Height:
ブラウザの表示領域の幅、高さ(ブラウザの枠は含まないが、スクロールバーは含まれている).
window.outer Width/outer Height:
ブラウザの外幅(ブラウザの枠を含め、各ブラウザの枠の端が同じであるため、得られた値も異なる).
3、
window.screenLeft/screenTop:
ブラウザのシフトieブラウザの内部端から画面端までの距離.chromeブラウザの外縁は画面の端からの距離です.
window.screenX/screenY:
ブラウザのシフトブラウザの外側の端から画面の端までの距離です.chromeブラウザの外縁は画面の端からの距離です.
window.pageXOffset/pageYOffset
ブラウザX軸(水平)、Y軸(垂直)スクロールバーのオフセット距離を表します.
window.scrollX/scrolly
ブラウザX軸(水平)、Y軸(垂直)スクロールバーのオフセット距離を表します.これにより、chromeとfirefoxではwindow.pageXOffsetとwindow.scrollXが等しいことが分かります.
screen
1、
screen.width/height
スクリーンの幅、高さ(スクリーンの解像度、単位はピクセル).
screen.avail Width/avail Height
画面の使用可能な幅、高さ(通常は画面の幅、高さと一致します).
1、
elment.client Width/client Height
スクロールバーがある場合:clientWidth=要素の左内余白+要素の幅+要素の右内余白幅-元素の垂直スクロールバーの幅にスクロールバーがない場合:clientWidth=要素の左内余白の幅+要素の幅+要素の右内余白の幅
この特性を使用して計算できるスクロールバーの幅(すなわち、設定要素の内容の幅が要素の幅を超えているかどうかは、それぞれ隠しを超えているかどうか、2回のclientWidth差分値がスクロールバーの幅である).
element.client Left/clientTop
clientLeftは左枠の幅で、clientTopは上縁の幅です.
element.offset Width/offset Height
オフセットWidth=要素の左枠の幅+要素の左内余白の幅+要素の幅+要素の右内余白の幅+要素の右枠線の幅.
element.offset Left/offset Top
この要素が最も近い位置付けの祖先要素に対する距離を表します.chrome:offset Left=祖先の左枠線の幅を定める+祖先要素の左内縁の幅を位置付ける+左変位+左外枠の幅ie 6/7/8/9/10、firefox:offset Left=祖先要素の左内縁の幅を定める+左変位+左余白の幅です.chromeは他のブラウザよりも祖先元素を位置づける外枠を多く計算した.offset Topは同じです
element.scrollwidth/scrollHeight
スクロールバーがある場合:chrome、firefox、ie 8/9/10:左内余白幅+内容幅.ie 6/7:左マージン幅+コンテンツ幅+右マージン幅(CSSのBUGによって引き起こされる).スクロールバーがない場合:左内余白の幅+幅+右内余白の幅です.
element.scrollLeft/scrollTop
水平、垂直スクロールバーの距離を取得します.
1、
clientX、client Y
clientXイベント属性は、イベントがトリガされた場合、ブラウザページ(またはクライアントエリア)に対するマウスポインタの水平座標を返します.イベント属性は、イベントがトリガされたときに、ブラウザページ(またはクライアントエリア)に対してマウスポインタの垂直座標を返します.顧客エリアとは現在のウィンドウのことです.
構文
event.pageX、event.pageY
event.client X、event.clientYと似ていますが、それらはウィンドウ座標ではなくドキュメント座標を使用しています.この2つの属性は標準属性ではないが、広く支持されている.IEイベントにはこの2つの属性がありません.
3、
event.offsetX、event.offsetY
マウスはイベントソースのX,Y座標に対して、IEイベントだけがこの2つの属性を持っています.標準イベントには対応する属性がありません.
4、
event.screenX、event.screenY
マウスはユーザディスプレイ画面の左上のXに対して、Y座標を表します.標準イベントとIEイベントの両方がこの2つの属性を定義しています.
締め括りをつける
スクリーンの幅:window.screen.width.ブラウザ内の幅:window.inner Width|document.documentElement.client Width.要素の内容の幅:element.client Width.要素のビット幅:element.offset Width.
1、
window.inner Width/inner Height:
ブラウザの表示領域の幅、高さ(ブラウザの枠は含まないが、スクロールバーは含まれている).
Internet Explorer、Chrome、Firefox、Opera Safari: window.innerHeight - window.innerWidth - Internet Explorer 8、7、6、5: document.documentElement.clientHeight document.documentElement.clientWidth document.body.clientHeight document.body.clientWidth
2、window.outer Width/outer Height:
ブラウザの外幅(ブラウザの枠を含め、各ブラウザの枠の端が同じであるため、得られた値も異なる).
:ie9/10、chrome、firefox。
注意:window.width属性はありません.3、
window.screenLeft/screenTop:
ブラウザのシフトieブラウザの内部端から画面端までの距離.chromeブラウザの外縁は画面の端からの距離です.
:ie6/7/8/9/10、chrome。
4、window.screenX/screenY:
ブラウザのシフトブラウザの外側の端から画面の端までの距離です.chromeブラウザの外縁は画面の端からの距離です.
:ie9/10、chrome、firefox。 chrome screenLeft screenX ( ie firefox, , firefox,chrome , , , ),ie9/10 screenLeft screenX 。
5、window.pageXOffset/pageYOffset
ブラウザX軸(水平)、Y軸(垂直)スクロールバーのオフセット距離を表します.
:ie9/10、chrome、firefox。
6、window.scrollX/scrolly
ブラウザX軸(水平)、Y軸(垂直)スクロールバーのオフセット距離を表します.これにより、chromeとfirefoxではwindow.pageXOffsetとwindow.scrollXが等しいことが分かります.
screen
1、
screen.width/height
スクリーンの幅、高さ(スクリーンの解像度、単位はピクセル).
:chrome、firefox。
2、screen.avail Width/avail Height
画面の使用可能な幅、高さ(通常は画面の幅、高さと一致します).
:ie6/7/8/9/10、chrome、firefox。
element1、
elment.client Width/client Height
スクロールバーがある場合:clientWidth=要素の左内余白+要素の幅+要素の右内余白幅-元素の垂直スクロールバーの幅にスクロールバーがない場合:clientWidth=要素の左内余白の幅+要素の幅+要素の右内余白の幅
この特性を使用して計算できるスクロールバーの幅(すなわち、設定要素の内容の幅が要素の幅を超えているかどうかは、それぞれ隠しを超えているかどうか、2回のclientWidth差分値がスクロールバーの幅である).
:ie6/7/8/9/10、chrome、firefox。
2、element.client Left/clientTop
clientLeftは左枠の幅で、clientTopは上縁の幅です.
:chrome、firefox、ie6/7/8/9/10。
3、element.offset Width/offset Height
オフセットWidth=要素の左枠の幅+要素の左内余白の幅+要素の幅+要素の右内余白の幅+要素の右枠線の幅.
:chrome、firefox、ie6/7/8/9/10。·
4、element.offset Left/offset Top
この要素が最も近い位置付けの祖先要素に対する距離を表します.chrome:offset Left=祖先の左枠線の幅を定める+祖先要素の左内縁の幅を位置付ける+左変位+左外枠の幅ie 6/7/8/9/10、firefox:offset Left=祖先要素の左内縁の幅を定める+左変位+左余白の幅です.chromeは他のブラウザよりも祖先元素を位置づける外枠を多く計算した.offset Topは同じです
:chrome、firefox、ie6/7/8/9/10。
5、element.scrollwidth/scrollHeight
スクロールバーがある場合:chrome、firefox、ie 8/9/10:左内余白幅+内容幅.ie 6/7:左マージン幅+コンテンツ幅+右マージン幅(CSSのBUGによって引き起こされる).スクロールバーがない場合:左内余白の幅+幅+右内余白の幅です.
:chrome、firefox、ie6/7/8/9/10。
6、element.scrollLeft/scrollTop
水平、垂直スクロールバーの距離を取得します.
:chrome、firefox、ie8/9/10、ie6/7( )。
イベントのプロパティ1、
clientX、client Y
clientXイベント属性は、イベントがトリガされた場合、ブラウザページ(またはクライアントエリア)に対するマウスポインタの水平座標を返します.イベント属性は、イベントがトリガされたときに、ブラウザページ(またはクライアントエリア)に対してマウスポインタの垂直座標を返します.顧客エリアとは現在のウィンドウのことです.
構文
event.clientX;
event.clientY;
2、event.pageX、event.pageY
event.client X、event.clientYと似ていますが、それらはウィンドウ座標ではなくドキュメント座標を使用しています.この2つの属性は標準属性ではないが、広く支持されている.IEイベントにはこの2つの属性がありません.
3、
event.offsetX、event.offsetY
マウスはイベントソースのX,Y座標に対して、IEイベントだけがこの2つの属性を持っています.標準イベントには対応する属性がありません.
4、
event.screenX、event.screenY
マウスはユーザディスプレイ画面の左上のXに対して、Y座標を表します.標準イベントとIEイベントの両方がこの2つの属性を定義しています.
締め括りをつける
スクリーンの幅:window.screen.width.ブラウザ内の幅:window.inner Width|document.documentElement.client Width.要素の内容の幅:element.client Width.要素のビット幅:element.offset Width.