ウィンドウの位置に関連する要素を取得するための js 実装コード_javascript スキル

JS は要素の offsetTop、offsetLeft およびその他の属性を取得します

obj.clientWidth //要素の幅を取得します

obj.clientHeight //要素の高さ
obj.offsetLeft //親要素を基準とした要素の左側
obj.offsetTop //親要素を基準とした要素の先頭
obj.offsetWidth //要素の幅
obj.offsetHeight //要素の高さ

違い:

clientWidth = 幅パディング
clientHeight = 高さのパディング
offsetWidth = パディング境界線の幅
offsetHeight = パディング境界線の幅
オフセットが境界線の幅を超えています

//获取元素的纵坐标（相对于窗口）
function getTop(e){
  var offset=e.offsetTop;
  if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
  return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
  var offset=e.offsetLeft;
  if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
  return offset;
}

以前、JS での要素の位置の取得に関する記事も書きました。 JS は、要素の offsetTop、offsetLeft、およびその他の属性を取得します。 offsetTop 属性と offsetLeft 属性を通じて、ウィンドウに対する要素の位置を取得できます。ですが、offsetTop 属性と offsetLeft 属性は親要素に相対的に配置されており、通常、位置を取得する必要がある要素は最外層にないため、上位要素のオフセット関連の属性をトラバースすることが不可欠です。そうなると効率が問題になります。

//获取元素的纵坐标（相对于窗口）
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获取元素的横坐标（相对于窗口）
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}

幸いなことに、ブラウザーは対応するインターフェース getBoundingClientRect を提供してくれました。このメソッドは IE ブラウザーで最初に登場しましたが、その後のブラウザーでもこのメソッドがサポートされ、IE は left、top、bottom の要素属性のみを取得できるようになりました。 、右、そしてそれ以降の最新のブラウザでも要素の幅と

を取得できます。

Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
1.0	3.0 (1.9)	4.0	(Yes)	4.0

ここで注意すべき点は、bottom は要素の下部とウィンドウの上部の間の距離であり、ウィンドウの下部を基準とした CSS の位​​置の下部ではないということです。同様に、rihgt 属性は要素の右端とウィンドウの左側の間の距離。

var box = document.getElementById("box");
var pos = box.getBoundingClientRect();
box.innerHTML = "top:"+pos.top +
  "left:"+pos.left +
  "bottom:"+pos.bottom +
  "right:"+pos.right +
  "width:"+pos.width +
  "height:"+pos.height

元の記事、転載する場合は明記してください: フロントエンド開発から転載