javascript - 如何根据div高度显示 block 文本

Question

我正在尝试根据 div 高度显示文本 block 。

应该是这样的:

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语句中，然后根据block 1的高度显示block 2。 Block 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>