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

【问题标题】：Hide element and show other if browser window width is less than如果浏览器窗口宽度小于，则隐藏元素并显示其他元素
【发布时间】：2014-12-04 11:40:45
【问题描述】：

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

当窗口宽度小于 990px 时隐藏 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）吗？

【问题讨论】：

标签： javascript browser window hide show

【解决方案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/

希望有帮助。

【讨论】：

【解决方案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";
}

【讨论】：

【解决方案3】：

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

【讨论】：

如果 ii 对你有用。请放弃投票并标记正确答案。
是的，我知道，我已经放弃了我的投票和正确的答案标记。感谢您的意见！ :)

【解决方案4】：

CSS3 media queries 可以做到这一切

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

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

我知道这并不完全符合您的要求，但这是 IMO 问题的最佳解决方案。

【讨论】：

谢谢@DoctorMick :)