Question

我试图构建一个在窗口大小时出现的表格。现在，我希望通过在窗口达到一定大小时隐藏表格来使其更具响应性。我已经看过window.onresize（），但我不确定如何使用以下代码实现它。

 if (iedom||document.layers){
    with (document){
        document.write('<table style="display:block" border="0" cellspacing="0" cellpadding="0"><td>')
        document.write('</td></table>')
    }
 }

Answer 1

使用CSS类。类似的东西：

.myClass {
   display:block;
}
// width > 768px
@media screen and (max-width: 768px){ 
  .myClass{
    display:none;
  }
}

// width < 768px
@media screen and (min-width: 768px){ 
  .myClass{
    display:none;
  }
}

Answer 2

使用jQuery：

$( window ).resize(function() {
  // Adding table when window resized to below 500px
  if($(this).width() <= 500){
    $( "body" ).append( "<table id='dynamicTable'><tr><td>Table created</td></tr></table>");

  }else if($(this).width() > 500){
    // Removing table from DOM when window resized to above 500px
    $( "#dynamicTable" ).remove();
  }

});

Answer 3

我在这个主题上的经历花了我一个小时左右的时间来解决。我与需要在屏幕调整大小时隐藏元素的任何人共享它，特别是当您的元素具有长CSS样式时：屏幕调整大小时，您必须重写样式。例如，当你有

.myClass {
    border-radius: 40px;
 }

对于主要样式，在调整@media screen and (min-width: 768px)的大小之后，您只希望两个角具有border-radius，就不能这样写：

.myClass {
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
 }

我当时以为主要样式会完全删除，而次要样式会在调整屏幕大小时应用，那是完全错误的，完全相同的样式将被替换而其他样式则不会。在我的示例中，如果我只想在块的2个角上放置border-radius，则必须首先删除所有角border-radius，然后应用border-top-right-radius和{{1} }，因此这将适用：

border-bottom-right-radius

，但是前一个不会。希望您能理解并帮助您更快地解决问题。

隐藏窗口大小上的元素

3 个答案: