如何判断屏幕大小来自动执行js？_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:59:091625浏览
想当屏幕宽度小于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> 声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn