how to check the height of an element in javascript?

Question

I want to check the height of the element "content" in javascript. The issue is there can be multiple "content"s with different heights in a single page and hence cannot use the "class=contentMain" in javascript(or atleast I think in that way).
Html code

    <template name="pT">
    <ul style="list-style-type:none" class="pcl">
        {{#each Contents}}
            {{>pI}}
        {{/each}}
    </ul>
    </template>      
    <template name="pI">
      <p class="bucket">
        <li class= "contentMain">{{{content}}}</li>
      </p>
   </template>

I want to use a helper function to check the height of the "content' element in javascript.

 Template.pI.helpers({
    $('.contentMain').height;
});

Apologies for diverting from any programming conventions. Any help would be hugely appreciated

Answer 1

If you are able to use an ID, assign one to the content box that you would like to measure the height of.

<li class= "contentMain">{{{content}}}</li>

becomes

<li id="contentMain" class="contentMain">{{{content}}}</li>

JS:

  Template.pI.helpers({
    $('#contentMain').height();
   });

Without an ID:

$("li").each(function () {
   if ($(this).hasClass('contentMain')) {
       var height = $(this).height();
   }  
});

Comment any parts that aren't applicable and I will adjust my answer :)

Answer 2

It depends what you want to do with this? You could do this:

Template.pI.helpers({
    myHelper: function () {
        var tmpl = Template.instance();
        return tmpl.$('.contentMain').height();
    }
})

Answer 3

var clientHeight = document.getElementsByClassName("contentMain")[0].clientHeight;

or

var offsetHeight = document.getElementsByClassName("contentMain")[0].offsetHeight;

The offsetHeight property is similar to the clientHeight property, but it returns the height including the padding, scrollBar and the border.