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

Question

我想检查元素的高度＆＃34;内容＆＃34;在javascript中。问题是在单个页面中可能存在多个具有不同高度的内容，因此无法使用＆＃34; class = contentMain＆＃34;在javascript（或至少我想这样）   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>

我想使用帮助函数来检查＆＃34;内容＆＃39;的高度。 javascript中的元素。

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

转移任何编程约定的道歉。 任何帮助都将非常感激

Answer 1

如果您能够使用ID，请将一个ID分配给您想要测量其高度的内容框。

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

变为

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

JS：

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

没有ID：

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

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

Answer 2

这取决于你想要做什么？你可以这样做：

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

Answer 3

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

或

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

offsetHeight属性类似于clientHeight属性，但它返回包括填充，scrollBar和边框的高度。