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

时间:2014-12-04 11:40:46

标签: javascript browser window hide show

当用户将浏览器窗口大小调整为小于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)?


4 个答案:

答案 0 :(得分:4)

这是一个简单的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/

希望有所帮助。

答案 1 :(得分:1)

试试这个: 使用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";
}

答案 2 :(得分:0)

您可以使用CSS3 media queries

完成所有操作
<style>
    @media (max-width: 990px) {
    #largeElement {
        display: none;
    }

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

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

答案 3 :(得分:0)

使用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;