Question

当用户将浏览器窗口大小调整为小于990像素的宽度时，我想要隐藏元素并显示其他元素。

当窗口宽度小于990像素时隐藏 largeElement
当窗口宽度小于990px时显示 smallElement

<div id="largeElement" style="width:900px;height:100px;background-color:#cc9966"></div>

<div id="smallElement" style="display:none;width:300px;height:100px;background-color:#39c"></div>

有没有人知道可以做到这一点的javascript（没有jQuery）？

Answer 1

这是一个简单的Javascript解决方案：

<div id="largeElement" style="width:900px;height:100px;background-color:#cc9966"></div>

<div id="smallElement" style="display:none;width:300px;height:100px;background-color:#39c"></div>

<script type="text/javascript">
toggle();
window.onresize = function() {
    toggle();
}

function toggle() {
    if (window.innerWidth < 900) {
        document.getElementById('largeElement').style.display = 'none';
        document.getElementById('smallElement').style.display = 'block';        
    }
    else {
        document.getElementById('largeElement').style.display = 'block';
        document.getElementById('smallElement').style.display = 'none';                
    }    
}
</script>

参见工作示例：http://jsfiddle.net/4p3nhy8b/

希望有所帮助。

Answer 2

试试这个：使用CSS：

@media (max-width : 990px){
   #largeElement{
       display : none;
   }
   #smallElement{
       display : block;
   }
}

@media (min-width : 991px){
   #largeElement{
       display : block;
   }
   #smallElement{
      display : none;
   }
}

使用Javascript：

if(window.innerWidth < 990){
    document.getElementById("largeElement").style.display = "none";
    document.getElementById("smallElement").style.display = "block";
}
else{
    document.getElementById("largeElement").style.display = "block";
    document.getElementById("smallElement").style.display = "none";
}

Answer 3

您可以使用CSS3 media queries

完成所有操作

<style>
    @media (max-width: 990px) {
    #largeElement {
        display: none;
    }

    #smallElement {
        display: block;
    }
  }
</style>

我知道这不是你要求的，但它是IMO问题的最佳解决方案。

Answer 4

使用javascript：

function fun(){
   var width = screen.width;
   if( width < 990 ){
     document.getElementById("largeElement").style.display = "none";
     document.getElementById("smallElement").style.display = "show";
  }
}


load in body  <body onresize="fun()">

或

window.onresize = fun;

如果浏览器窗口宽度小于，则隐藏元素并显示其他元素

4 个答案: