jquery를 사용하여 높이를 계산하는 방법

Question

위에서 링크를 추가 한 지점까지의 높이를 계산하고 싶습니다.

w = $(window).height(); 

이 윈도우의 높이를 계산하기 :

어떻게 우리가 사용하는 예를 들어 높이를 계산할 수 있습니다.

마찬가지로 전 앵커 태그 그 앵커 첨가 지점에서 헤더

<a href="#" id="calc"></a> 

의 높이를 산출하려면?

outerh = $('#calc').outerHeight(); 
innerh = $('#calc').innerHeight(); 

는 I 코드 위에 시도했지만, 그 앵커 태그의 높이를 산출하기 때문에 그 높이 18px를 반환한다.

Answer 1

offset().top을 사용하여 계산할 수 있습니다.

첫 번째 요소의 현재 좌표를 가져 오거나 일치하는 요소 집합에서 모든 요소의 좌표를 문서와 관련하여 설정합니다.

데모 : 앵커 태그의 하부 에지로부터 앵커 태그 위에서

height_top= $('#calc').offset().top; 

높이의 상단으로부터 앵커 태그 위에서

console.log($('#calc').offset().top);

body { 
 
    margin:0; 
 
} 
 

 
a { 
 
    display:inline-block; 
 
    margin-top:100px; 
 
}

<script src="https://code.jquery.com/jquery-3.0.0.js"></script> 
 
<a href="#" id="calc">link</a>

Answer 2

높이 앵커 태그

height_top= $('#calc').offset().top + $('#calc').outerHeight();