page_javascript スキルで要素のオフセットを取得するための js メソッドの概要

js を使用してエフェクトを作成する場合、多くの場合、ページ上の要素のオフセットを取得する必要があります (ヒント プロンプト ボックス機能など)。オフセットを取得するには、ドキュメントに対する相対的なオフセットを直接取得することも、ビューポート (視点) に対する相対的なオフセットにページのスクロール量 (スクロール) を加えたものを取得することもできます。

1. ドキュメントに対する相対的なオフセットを取得します

function getOffsetSum(ele){
  var top= 0,left=0;
  while(ele){
    top+=ele.offsetTop;
    left+=ele.offsetLeft;
    ele=ele.offsetParent;
  }
  return {
    top:top,
    left:left
  }
}

offsetParent を上向きに反復することで、ドキュメントに対する相対的なオフセット、つまりページに対する相対的なオフセットを計算できます。

この方法の問題点:

1) テーブル レイアウトとインライン フレーム レイアウトを使用するページの場合、ブラウザごとに要素の実装方法が異なるため、得られる結果は不正確になります。

2) offsetParent を一度に 1 レベルずつ検索する必要があると、効率が低すぎます。

2. ビューポート (視点) とページのスクロール量 (スクロール) を基準としたオフセットを取得します

function getOffsetRect(ele){
      var box=ele.getBoundingClientRect();
      var body=document.body,
        docElem=document.documentElement;
      //获取页面的scrollTop,scrollLeft(兼容性写法)
      var scrollTop=window.pageYOffset||docElem.scrollTop||body.scrollTop,
        scrollLeft=window.pageXOffset||docElem.scrollLeft||body.scrollLeft;
      var clientTop=docElem.clientTop||body.clientTop,
        clientLeft=docElem.clientLeft||body.clientLeft;
      var top=box.top+scrollTop-clientTop,
        left=box.left+scrollLeft-clientLeft;
      return {
        //Math.round 兼容火狐浏览器bug
        top:Math.round(top),
        left:Math.round(left)
      }
    }

このメソッドは、getBoundingClientRect() メソッドを通じてビューポートに対する相対的なオフセットを直接取得し、ページのスクロール量に加えて clientTop、clientLeft を差し引いた値を取得します (IE8 以前のブラウザは開始点の座標として (2,2) を使用します。他のブラウザでは、開始点の座標として (0,0) を使用するため、値から開始点の座標を減算する必要があります。

getBoundingClientRect() メソッドは、IE、ff3、safari4、Orear9,5、Chrome をサポートします。

3. 互換性の書き込み

//获取元素相对于页面的偏移
function getOffset(ele){
  if(ele.getBoundingClientRect){
    return getOffsetRect(ele);
  }else{
    return getOffsetSum(ele);
  }
}

getBoundingClientRect() メソッドをサポートするブラウザの場合は getOffsetRect() メソッドを使用し、サポートしないブラウザの場合は getOffsetSum() メソッドを使用します。

以上がこの記事の全内容です。JavaScript を学習する皆さんのお役に立てれば幸いです。