jquery의 offset() 메소드 example_javascript 기술의 js 구현

이 문서의 예에서는 js가 jquery의 offset() 메서드를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

jQuery의 offset()을 사용해 본 학생들은 offset().top 또는 offset().left가 전체 페이지를 기준으로 요소의 오프셋을 쉽게 얻을 수 있다는 것을 알고 있습니다.

js에는 그러한 직접적인 방법이 없습니다. 노드의 속성 offsetTop은 상위 노드를 기준으로 노드의 상대 오프셋을 얻을 수 있지만 노드를 사용하여 계층별로 위쪽으로 재귀할 수는 없습니다. 절대 오프셋을 얻으려면 offsetTop을 추가하십시오.

코드 복사 코드는 다음과 같습니다.

function getOffset(Node, offset) {
If (!오프셋) {
오프셋 = {};
Offset.top = 0;
Offset.left = 0;
}

if (Node == document.body) {//노드가 본문 노드이면 재귀를 종료합니다
         반품 오프셋;
}

offset.top = Node.offsetTop;
Offset.left = Node.offsetLeft;

return getOffset(Node.parentNode, offset); // 오프셋의 값을 위쪽으로 누적
}

사용시 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

var a = document.getElementById('a');
//getOffset(a).top
//getOffset(a).left

이 기사가 모든 사람의 JavaScript 프로그래밍 설계에 도움이 되기를 바랍니다.