Rumah >hujung hadapan web >html tutorial >如何判断屏幕大小来自动执行js？_html/css_WEB-ITnose
如何判断屏幕大小来自动执行js？_html/css_WEB-ITnose
- WBOYasal
- 2016-06-24 11:59:091637semak imbas
想当屏幕宽度小于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> Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：求大神指教！谢谢了吖_html/css_WEB-ITnoseArtikel seterusnya：div+css的问题，在线等_html/css_WEB-ITnose