창 position_javascript 기술과 관련된 요소를 얻기 위한 Node.js 구현 코드

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는 왼쪽, 위쪽, 아래쪽 요소 속성만 가져올 수 있습니다. , right 및 최신 브라우저에서는 요소의 너비와

도 얻을 수 있습니다.

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

여기서 주목해야 할 점은 하단은 창 하단을 기준으로 한 CSS의 위치 하단이 아니라 요소 하단과 창 상단 사이의 거리라는 것입니다. 요소의 가장 오른쪽 부분과 창의 왼쪽 부분 사이의 거리입니다.

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

원본 기사, 재인쇄 시 명시해 주세요: 프론트 엔드 개발에서 재인쇄