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

Question

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

• 当窗口宽度小于990px时隐藏largeElement
  

• 显示smallElement当窗口宽度小于990px

<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/

希望能有所帮助。