javascript中offset、client、scrollの属性の総括

4562 ワード

HTML要素にはいくつかのoffset、client、scrollの先頭の属性があります.メモを見て、必要な仲間に分けます.主に以下の属性です.
第一グループ:offset Width、offset Height、offset Left、offset Top、offset Part
　第二組:clientWidth、clientHeight、clientLeft、clientTop
第三組:scrollwidth、scrollHeight、scrollLeft、scrollTop
詳細な定義は以下の通りです.
1.1 HTML要素のoffset Widthは、Offset HeightがCSSピクセルでそのスクリーンサイズに戻り、要素の枠線と内側余白を含み、外距離を含まない.
1.2 offset Leftとoffset Top属性は、要素のXとY座標を返します.通常、それらは値を返します.すなわち、ドキュメント座標です.しかし、テーブルユニットなどの他の要素と、位置付けされている要素に対しては、これらの属性が返される座標は、ドキュメントではなく先祖の要素に対してです.
1.3 offset Part属性は、offset Left、offset Topの親要素を指定します.offset Partがnullの場合、後の両方の戻り値はドキュメント座標です.したがって、一般的に、offset Leftおよびoffset Topで要素eの位置を計算するには、ループが必要である.


//         
function getElementPosition(e){
  var x=0,y=0;
  while(e !=null){
    x +=e.offsetLeft;
    y +=e.offsetTop;
    e=e.offsetParent; 
  }
  return {x:x, y:y} ;  
}

この方法で計算した位置も常に正確ではなく,内蔵したget BoundingCientRect()法を用いることを推奨している.
2.1 clientWidthとclientHeightはoffset Widthとoffset Heightの属性に似ています.違いは、それらは外枠のサイズを含まず、内容と内縁だけを含んでいます.また、ブラウザ内のマージンと枠の間にスクロールバーが追加されている場合、clientWidthとclientHeightの返却値もスクロールバーが含まれていません.なお、タイプについては、 ，clientWidth clientHeight 0。2.2 clientLeftとclientTopは要素の内縁の外縁とその外枠の外縁との間の水平距離と垂直距離を返します.これらの値は左と上の外枠の幅に等しくなります.ただし、要素にスクロールバーがあり、ブラウザがこれらのスクロールバーを左側または上部に回転させると、スクロールバーの幅も含まれます.インライン要素については、常に0です.通常はclientLeftとclientTopはあまり役に立ちません.
3.1 scrollwidthとscoll Heightは元素のコンテンツ領域であり、その内部余白とオーバーフロー内容のサイズを加えている.コンテンツがコンテンツ領域と一致してオーバーフローがない場合、これらの属性は、clientWidthとclientHeightと同じである.ただし、オーバーフロー時にはオーバーフローの内容が含まれており、リターン値はclientWidthとclientHeightよりも大きい.
3.2 scrollLeftとscrollTopは要素のスクロールバーの位置を指定します.なお、scrollLeftとscrollTopは書き込み可能であり、それらを設定することによって、要素の中のコンテンツをスクロールさせる(HTML要素はWindowオブジェクトのようなscrollTo(方法)は存在しない.
obj.offset[WidthHeight TopLeft]は、親がコントロールする位置event.offset[XY]に対してマウスの位相をとり、イベントをトリガするコントロールの中の座標event.screen[XY]マウスを画面座標event.client[XY]マウスに対してウェブページ座標に対してobj.scroll[WidthHephtt]にスクロールするオブジェクトのサイズを取得します.オブジェクトの可視領域のサイズを取得






     



offset            

function offset(ids){
ids.innerHTML="offsetLeft ="+ids.offsetLeft+"<BR>";
ids.innerHTML+="offsetWidth ="+ids.offsetWidth+"<BR>";
ids.innerHTML+="offsetHeight ="+ids.offsetHeight+"<BR>";
ids.innerHTML+="offsetTop ="+ids.offsetTop+"<BR>";
ids.innerHTML+="event.offset           <BR>";
ids.innerHTML+="offsetX ="+event.offsetX+"<BR>";
ids.innerHTML+="offsetY ="+event.offsetY+"<BR>";
}
function screen(ids){
ids.innerHTML="scrollWidth ="+ids.scrollWidth+"<BR>";
ids.innerHTML+="scrollHeight ="+ids.scrollHeight+"<BR>";
ids.innerHTML+="scrollTop ="+ids.scrollTop+"<BR>";
ids.innerHTML+="scrollLeft ="+ids.scrollLeft+"<BR>";
}
function client(ids){
ids.innerHTML="clientWidth ="+ids.clientWidth+"<BR>";
ids.innerHTML+="clientHeight ="+ids.clientHeight+"<BR>";
ids.innerHTML+="clientTop ="+ids.clientTop+"<BR>";
ids.innerHTML+="clientLeft ="+ids.clientLeft+"<BR>";
}
function eventc(ids){
ids.innerHTML="         <BR>event.screenX="+event.screenX+"<BR>";
ids.innerHTML+="event.screenY ="+event.screenY+"<BR>";
ids.innerHTML+="         event.clientX="+event.clientX+"<BR>";
ids.innerHTML+="event.clientY ="+event.clientY+"<BR>";
}

各ブラウザにはこれらの属性があります.値が違うかもしれません.
自分でコードを書いて、結果を比較すれば分かります.

JavaScriptノート02