画面オブジェクト
画面の高さと幅を取得します(解像度)
screen.width // wide screen.height // high screen.availwidth //スクリーンを使用して、システムコンポーネントの高さの後に値を差し引くことができます。AvailHeight//スクリーンを使用して、システムコンポーネントのピクセル幅を減算できます。
ウィンドウオブジェクト
ウィンドウの位置とサイズを取得します
window.screentop //ウィンドウの上部から画面の上部までの距離ウィンドウ。screenleft//ウィンドウの左側から画面の左側までの距離ウィンドウ。 // CHROME 1366 FF 1366 IE 1366 window.innerheight //ウィンドウの視点の高さこの値は、ブラウザがメニューバーを表示するかどうかなどの要因に関連しています。 // CHROME 643 FF 657 IE 673WINDOW.outerWidth //ブラウザウィンドウ自体の幅(可視領域幅 +ブラウザの境界幅)アラート(window.outerwidth); // Chrome 1366 FF 1382 IE 1382 //クロムが最大化された場合、ブラウザウィンドウに境界幅がなく、最大化されない場合、8pxの境界幅// ff、右下、右、右window.outerheeight // Chrome 728 FF 744 IE 744
要素オブジェクト
要素オブジェクトのさまざまな高さと幅を導入する前に、ボックスモデルを説明する必要があります。
デフォルトのボックスモデルボックスサイジング:コンテンツボックス。
boxWidth = 2*マージン + 2*境界 + 2*パディング + widthboxheight = 2*マージン + 2*border 2*パディング +高さ
スクロールバーが表示されないとき
body {margin:0;}#demo {width:100px;高さ:100px;パディング:10px;国境:20px;マージン:30px;バックグラウンドカラー:red;} <div id = "demo"> 123456789 123456789 </div>ClientWidth:ページ上のコンテンツの可視幅を返します(境界、マージン、またはスクロールバーを除く)
ClientHeight:ページ上のコンテンツの可視高さを返します(境界、マージン、またはスクロールバーを除く)
clientWidth = 2*パディング +幅-ScrollBarWidth Console.log(document.getElementById( 'demo')。clientWidth); // 120この時点でscrollbarwidth = 0clientheight = 2*padding + height -scrollbarheight console.log(document.getElementById( 'demo')。clientheight); // 120この時点でscrollbarwidth = 0
offsetWidth:境界線と充填を含む要素の幅を返しますが、マージンは含まれません
OffseTheight:境界と充填を含む要素の高さを返しますが、マージンは含まれていません
offsetWidth = 2*border + 2*padding + width console.log(document.getElementbyId( 'demo')。offsetWidth)// 160OffSeTheight = 2*PADDING + HEIGHT CONSOLE.LOG(document.GetElementByID( 'DEMO')。
offsetLeft:オフセットレフトプロパティによって指定されたレイアウトまたは親座標に対するオブジェクトの計算された左の位置を取得します
オフセット:オフセットプロパティで指定されたレイアウトまたは親座標に対するオブジェクトの計算されたトップ位置を取得します
console.log(document.getElementbyId( 'demo')。offsetLeft)//30Console.log(document.getelementbyid('demo').offsettop)// 30スクロールバーが表示されるとき
ボディ{マージン:0;パディング:20px;幅:1000px;高さ:500px;} <div id = "demo"> 123456789123456789 </div>ScrollWidth:要素の幅全体を返します(スクロールバーのある隠された場所を含む)
Scrollheight:要素全体の高さ(巻物見付きの隠された場所を含む)を返します
scrollwidth = 2*padding + width console.log(document.body.scrollwidth)// 1040scrollheight = 2*padding + width console.log(document.body.scrollheight)// 540
スクロールトップ:スクロールブロックをスライドさせるときに、要素の高さを非表示にします。設定されていない場合、デフォルトは0で、スクロールブロックスクロールとして値が変化します
ScrollLeft:スクロールブロックを右にスライドさせると、要素の幅が非表示になります。設定されていない場合、デフォルトは0で、スクロールブロックスクロールとして値が変化します
イベントオブジェクト
イベントオブジェクトは、イベントが発生する要素、キーボードキーのステータス、マウスの位置、マウスボタンのステータスなど、イベントのステータスを表します。
event.Pagex:ページ全体の座標と比較して、ページの左上隅は、座標の原点からマウスが配置されるポイントまでの水平距離です(IE8はサポートしていません)
event.Pagey:ページ全体の座標と比較して、ページの左上隅は、座標の原点からマウスが配置されるポイントまでの垂直距離です(IE8でサポートされていません)
event.clientx:相対視覚領域の座標。ブラウザの視覚領域の左上隅を座標の起源からマウスの位置までの水平距離として、ブラウザビジュアル領域の左上角の原点からマウスの原点からマウスが位置するポイントまでの水平距離として使用して、
event.Clienty:ブラウザの視覚領域の左上隅を座標起点からマウスの位置までの垂直距離として垂直距離として使用し、ブラウザビジュアル領域の左上角を座標起点からマウスの位置にあるポイントまでの垂直距離として使用して、相対視覚領域の座標。
event.screenx:コンピューター画面の座標と比較して、座標起点からマウスの位置までの水平距離、画面の左上隅を座標起点からマウスの位置のポイントまでの水平距離として使用して、
event.screeny:コンピューター画面の座標と比較して、座標起点からマウスの位置までの垂直距離、画面の左上隅を座標起点からマウスの位置にあるポイントまでの垂直距離として使用して、
event.offsetx:独自の座標と比較して、独自のパディングの左上隅の座標起点からマウスが配置されているポイントまでの水平距離は、座標の座標起点からマウスが配置されるポイントまでの水平距離に基づいています。
event.offsety:独自の座標と比較して、独自のパディングの左上隅の座標起点からマウスが位置するポイントまでの水平距離は、座標起点からの水平距離に基づいています。
JavaScriptのWebページのさまざまな高さと幅と位置を取得する方法の上記の概要は、エディターが共有するコンテンツ全体です。私はそれがあなたに参照を与えることができることを願っています、そして私はあなたがwulin.comをもっとサポートすることを願っています。