Question

我正在尝试基于div高度显示文本块。

应如下所示：

If (height >= 3000) {
  display #block2
} else {
  nothing
}

我到目前为止尝试过：

$(function() {
  var $block1 = $('#block1');
  $block1.html('Div style set as "height: 3000px;"')
    .append('<p>Height (.height() returns) : ' + $block1.height() + ' [Just Height]</p>')
});

div { font-size: 0.9em; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
<div id="block1" style="height: 3000px; padding: 10px; margin: 10px; border: 1px solid red;">
  <div id="block2">example text (display this block)</div>
</div>

Answer 1

您快到了-身高已高，因此您所要做的就是在if中显示div：

下面，我将您的身高放在if语句中，然后根据区块1的高度显示区块2。第2块以隐藏在CSS中的方式开始

var $block1 = $('#block1'),
    $block2 = $('#block2');

if ($block1.height() >= 3000) {
   $block2.show();                // show block 2 if block 1 height (not including padding or margin) >= 3000
}

div { font-size: 0.9em; }

#block2 {
    display:none;  /*start off hidden */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="block1" style="height: 3000px; padding: 10px; margin: 10px; border: 1px solid red;">
  <div id="block2">example text (display this block)</div>
</div>

如何基于div高度显示块文本

1 个答案: