Heim > Artikel > Web-Frontend > 如何判断屏幕大小来自动执行js？_html/css_WEB-ITnose
如何判断屏幕大小来自动执行js？_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:59:091600Durchsuche
想当屏幕宽度小于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> Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：求大神指教！谢谢了吖_html/css_WEB-ITnoseNächster Artikel：div+css的问题，在线等_html/css_WEB-ITnose