首页 > web前端 > html教程 > 如何判断屏幕大小来自动执行js?_html/css_WEB-ITnose

如何判断屏幕大小来自动执行js?_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:59:09
原创
1627 人浏览过

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


回复讨论(解决方案)

<div id="div"></div>
登录后复制

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

借用楼上的代码,其实我的建议是这样,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>
登录后复制

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板