在clientHeight＆lt;中删除元素的脚本“尺寸”

时间：2016-04-22 13:48:51

标签： height responsive

我想知道在clientHeight＆lt;来自动态删除html元素的脚本。 600像素，但如果它> 600px则重建它。

if (document.documentElement.clientHeight < 600) {
$(".section-intro").remove();
}

到目前为止，这是有效的，但我希望它在clientHeight优于600px时重建已删除的元素。我可以使用while而不是if吗？

1 个答案:

答案 0 :(得分：0)

使用CSS3 `@media`规则

<!DOCTYPE html>
<html>
<head>
  <style>
  @media (max-height: 600px) {
    .section-intro {
      display: none;
    }
  }
  </style>
</head>
<body>
  <div> Test 1 </div>
  <div class="section-intro" > Test 2 </div>
  <div> Test 3 </div>
</body>
</html>

使用JavaScript

首先创建函数，它将调整HTML元素的可见性。其次，使用$(document).ready( func )和$(window).resize( func )将该函数注册为回调函数。这样，当DOM完全加载时，以及调整浏览器窗口大小时，都会调用您的函数。

这里有完整的工作示例：

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <script>
  function recalculateVisibility(jQuery) {
    if (document.documentElement.clientHeight < 600) 
      $(".section-intro").hide();
    else 
      $(".section-intro").show();
  }

  $(document).ready(recalculateVisibility);
  $(window).resize(recalculateVisibility);
  </script> 
</head>
<body>
  <div> Test 1 </div>
  <div class="section-intro" > Test 2 </div>
  <div> Test 3 </div>
</body>
</html>