CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user6617474
user6617474

Reputation: 113

how to calculate height using jquery

I want to calculate the height from the top to the point where i have added link.

How can i calculate height for example we use:

w = $(window).height();

to calculate the height of window.

Similarly i want to calculate the height of the anchor tag 

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

from the header to the point where that anchor is added?

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

I have tried above code but it return 18px of height because it is calculating the height of that anchor tag.

Upvotes: 2

Views: 1521

Answers (2)

Mosh Feu
Mosh Feu

Reputation: 29347

You can calculate it using offset().top.

Get the current coordinates of the first element, or set the coordinates of every element, in the set of matched elements, relative to the document.

Demo:

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>

Upvotes: 6

Haresh Vidja
Haresh Vidja

Reputation: 8496

Height from top for anchor tag from top edge of anchor tag

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

Height from top for anchor tag from bottom edge of anchor tag

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

Upvotes: 0

Related Questions