Question

我想在类元素中获得段落元素的高度。

例如我的html代码：

<div class="myClass">
    <p> here goe's some awesome text </p>
</div>

<div class="myClass">
    <h1>Some Heading</h1>
    <p>another great text</p>
</div>

现在我希望能够访问div元素的总高度，但也希望能够访问子元素p的高度。

我尝试使用getElementsByClassName('myClass').children('p')，但这不起作用。我想用jQuery设置div的高度，在文件就绪时，高度应该是div-element的高度减去divs p元素的高度。

类似的东西：

var divs = $(document).getElementsByClassName('myClass');
for (var i = 0; i < divs.length; i++){
    divs[i].style.height = divs[i].height() - divs[i].children('p').height();
}

我不确定实际的正确代码是什么样的，或者是否有办法获得子p元素的高度。

Answer 1

使用Jquery，您可以在每个p元素中搜索myClass。试试这个：

$(document).ready(function(){
    $('.myClass').each(function(){
        var h = $(this).find('p').height();
        alert(h)
    })
})

选中 DemoFiddle

Answer 2

你可以做这样简单的事情，使用 css() jquery方法和回调函数

$('.myClass').css('height', function(i, v) {
  return parseInt(v, 10) - parseInt($(this).children('p').height(), 10);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="myClass">
  <p>here goe's some awesome text</p>
</div>

<div class="myClass">
  <h1>Some Heading</h1>
  <p>another great text</p>
</div>

Answer 3

您可以使用jquery，如下所示。

$('.myClass > p').each(function(  ) {
    alert($(this).height());
});

希望这对你有所帮助。

Answer 4

请勿忘记使用outerHeight(true)来包含和填充容器所拥有的边距和/或边距。

$(function() { // Wait for page to load
  $('.myClass').each(function() { // Loop over all items
     var div = $(this),
       height = div.outerHeight(true), // Get height + margin + padding
       paragraphHeight = div.find('p').outerHeight(true); // Get height + margin + padding of P child

    div.height(height - paragraphHeight); // Set the new height
  });
});

JS小提琴：http://jsfiddle.net/b9tcxxks/

Answer 5

Here is the working demo

http://jsfiddle.net/silpa/qzvfswz8/66/

$('.myClass').each(function(){
$height_div = $(this).height();
$height_p = $(this).find('p').height(); 
$(this).css('height',$height_div-$height_p);
});

Answer 6

您可以使用height方法与outerHeight一起计算p的高度：

＆＃13;

$('.myClass').height(function(i, oldHeight) {
    return parseInt(oldHeight) - $(this).find('p').outerHeight(true)
});

＆＃13;

.myClass {
    overflow: hidden;
    background-color: #EEE;
    margin-top: 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="myClass">
    <h2>Subtitle</h2>
    <p>here goe's some awesome text</p>
</div>

<div class="myClass">    
    <h1>Some Heading</h1>
    <p>another great text</p>
</div>

＆＃13;

如何获取特定类元素（js / jquery）的段元素的高度

6 个答案: