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

Question

我想在用户将浏览器窗口调整为小于 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)吗？

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/

希望对您有所帮助。