如何判断屏幕大小来自动执行js？

SilverBullet 2014-08-24 10:23:24

想当屏幕宽度小于800px时自动隐藏div

...全文

295 2 打赏收藏转发到动态举报

写回复

用AI写文章

2 条回复

切换为时间正序

请发表友善的回复…

发表回复

豪情 2014-08-24

打赏
举报

借用楼上的代码，其实我的建议是这样，ie9以上css3的media可以实现楼主所说的效果。然后以下的用js实现，并且加上resize事件的绑定，要不然，隐藏之后窗口在拉大就不显示了。完整参考代码如下：


<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        @media screen and (max-width:800px) {
            #div{ color:#f00;}
        }
    </style>
    <!--[if lt IE 9]>
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
    <script src="hide.js"></script>
    <![endif]-->
</head>
<body>
<div id="div">this test div</div>
<script type="text/javascript">
    function hideDiv(){
        var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
        var div = document.getElementById("div");
        if(browserWidth < 800){
            div.style.display = "none";
        } else {
            div.style.display = "block";
        }
    }

    var timer = null;
    window.onresize = function(){
        timer && clearTimeout(timer);
        setTimeout(function(){
            hideDiv();
        }, 200);
    }

    hideDiv();
</script>
</body>
</html>

Tammeny 2014-08-24

打赏
举报

<div id="div"></div>


var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if(browserWidth<800)
{
       document.getElementById("div").style.display="none";
}