增加每个添加元素的div高度

时间:2017-10-03 19:25:19

标签: javascript html css

我正在使用while循环从我的数据库输出注释现在我想为每个添加的注释,某个div的高度增加我应该怎么做?我正在考虑制作一个for循环,用于计算while循环输出的注释数,然后增加for循环中每个计数div的css高度。但我真的不知道如何在最后增加高度。

//While loop which outputs the comments
<div class="commentwrapper">
while($rowcomments = mysqli_fetch_array($resultgetcomments)){
echo "<div class='commentdiv'>
	<p class='commentuser'> Posted by: '".$rowcomments['CommentUsername']."' on: '".$rowcomments['CommentDate']."'</p> '".$rowcomments['CommentTxt']."'</div>

for(var i = 0; i < rowcomments.length; i++){
        document.getElementById('#commentwrapper');
        commentwrapper.style.height = /* here I would like to increase the height per 250px for each outputted comment*/;

}

3 个答案:

答案 0 :(得分:0)

CSS救援。没有必要的JS。

.commentwrapper {
    display: table; /* Make the container element behave like a table */
}

.commentdiv {
    display: table-cell; /* Make elements inside the container behave like table cells */
}

答案 1 :(得分:0)

您可以在for循环中使用jQuerys .animate()方法:

for(var i = 0; i < rowcomments.length; i++){
    $('#commentwrapper').animate({'height': '+=250px'});
}

答案 2 :(得分:0)

for(var i = 0; i < rowcomments.length; i++){
var commentwrapper =  document.getElementById("#commentwrapper");
if(height===null){
var height = document.getElementById("#commentwrapper").style.height;
}
else{
height=height + 250;
}
    commentwrapper.style.height = height;
}