如何在javascript中检查元素的高度？

我想检查javascript中元素“content”的高度。问题是一个页面中可能有多个高度不同的“内容”，因此不能在javascript中使用“class=contentMain”（至少我认为是这样）。
Html代码

    <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>

对于偏离任何编程约定表示歉意。 任何帮助都将不胜感激

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

或

---

offsetHeight

属性类似于

clientHeight

属性，但它返回的高度包括填充、滚动条和边框。

如果您能够使用ID，请为要测量其高度的内容框指定一个ID

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

没有身份证：

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

---

评论任何不适用的部分，我将调整我的答案：）

这取决于你想用它做什么？您可以这样做：

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

---

一个普遍的困惑：-我没有在我的html文件中使用任何“id”。那么，如何解决这个问题呢？@SujoyDe我已经编辑了我的答案，我相信它也会起作用。很抱歉再次询问，但是在contentMain之后，[0]的功能是什么。谢谢你answering@SujoyDe

document.getElementsByClassName（）

返回项的集合，因为您可以有多个类，

[0]

选择class@SujoyDe由于您的页面上有多个这样的选项，因此这很方便，因为您可以将其更改为

[1]

如果您想要第二种情况，我相信我不能在这里使用“id”，因为一个文件中有多个内容page@SujoyDe更新我的答案，让我知道新的解决方案是否有效。你想用这个高度值做什么？我想检查高度是否大于60像素。如果是这样的话，我想将类big而不是contentmainhmm放在模板呈现之后，您需要这样做，因此在onRendered（）钩子中，您可以使用jQuery来迭代项

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

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

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

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