Maison > interface Web > tutoriel HTML > le corps du texte

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

WBOY
Libérer: 2016-06-24 11:59:09
original
1597 Les gens l'ont consulté

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


回复讨论(解决方案)

<div id="div"></div>
Copier après la connexion

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

借用楼上的代码,其实我的建议是这样,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>
Copier après la connexion

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal