如何判断屏幕大小来自动执行js？_html/css

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:59 AM

js 判断大小执行自动

想当屏幕宽度小于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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7657

CakePHP 教程

1393

steam的账户名称是什么格式

win11激活密钥永久

NYT迷你填字游戏答案

111

显示更多

Related knowledge

推荐：优秀JS开源人脸检测识别项目 Apr 03, 2024 am 11:55 AM

人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计

如何使用PHP和JS创建股票蜡烛图 Dec 17, 2023 am 08:08 AM

如何使用PHP和JS创建股票蜡烛图股票蜡烛图是股票市场中常见的一种技术分析图形，通过绘制股票的开盘价、收盘价、最高价和最低价等数据，帮助投资者更直观地了解股票的价格波动情况。本文将教你如何使用PHP和JS创建股票蜡烛图，并附上具体的代码示例。一、准备工作在开始之前，我们需要准备以下环境：1.一台运行PHP的服务器2.一个支持HTML5和Canvas的浏览器3

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤 Dec 17, 2023 pm 06:55 PM

股票分析必备工具：学习PHP和JS绘制蜡烛图的步骤，需要具体代码示例随着互联网和科技的快速发展，股票交易已经成为许多投资者的重要途径之一。而股票分析是投资者决策的重要一环，其中蜡烛图被广泛应用于技术分析中。学习如何使用PHP和JS绘制蜡烛图将为投资者提供更多直观的信息，帮助他们更好地做出决策。蜡烛图是一种以蜡烛形状来展示股票价格的技术图表。它展示了股票价格的

如何在VirtualBox中增加磁盘大小[指南] Mar 17, 2024 am 10:10 AM

我们经常遇到预定义磁盘大小没有空间容纳更多数据的情况？如果您在稍后阶段需要更多的虚拟机硬盘空间，则必须扩展虚拟硬盘和分区。在这篇文章中，我们将看到如何在VirtualBox中增加磁盘大小。增加VirtualBox中的磁盘大小重要的是要注意，您可能希望在执行这些操作之前备份您的虚拟硬盘文件，因为总是有可能出错。有备份总是一个好的做法。然而，该过程通常运行良好，请确保在继续之前关闭您的机器。有两种方法可以增加VirtualBox中的磁盘大小。使用图形用户界面扩展VirtualBox的磁盘大小使用CL

Linux小技巧：取消vim粘贴时的自动缩进 Mar 07, 2024 am 08:30 AM

前言vim是个强大的文本编辑的工具，在Linux端得到极大的使用热度。最近在另外一台服务器上使用vim时，遇到了一个奇怪的问题：当我将本地编写好的脚本复制并粘贴到服务器中的空白文件时，出现了自动缩进的情况。用个简单的例子来说，就是我在本地写的脚本如下：aaabbbcccddd当我将上述内容复制后，粘贴到服务器中的空白文件后得到的却是：aabbbcccddd很明显，这是vim给我们自动进行了格式缩进。但是，这个自动有点不智能。这里记录下解决方案。解决方案：设置.vimrc配置文件我们在家目录下，新

在Linux上自动装载驱动器 Mar 20, 2024 am 11:30 AM

如果您使用Linux操作系统，并希望系统在启动时自动加载驱动器，可以通过将设备的唯一标识符（UID）和挂载点路径添加到fstab配置文件中来实现。fstab是一个位于/etc目录中的文件系统表文件，它包含了系统在启动时需要挂载的文件系统的信息。通过编辑fstab文件，您可以确保在每次系统启动时都能正确加载所需的驱动器，从而保证系统的稳定运行。自动安装驱动器可方便地应用于多种情境。比如，我计划将系统备份到外部存储设备。为了实现自动化，需确保设备与系统保持连接，甚至在启动时。同样，很多应用程序会直接

PHP与JS开发技巧：掌握绘制股票蜡烛图的方法 Dec 18, 2023 pm 03:39 PM

随着互联网金融的迅速发展，股票投资已经成为了越来越多人的选择。而在股票交易中，蜡烛图是一种常用的技术分析方法，它能够显示股票价格的变化趋势，帮助投资者做出更加精准的决策。本文将通过介绍PHP和JS的开发技巧，带领读者了解如何绘制股票蜡烛图，并提供具体的代码示例。一、了解股票蜡烛图在介绍如何绘制股票蜡烛图之前，我们首先需要了解一下什么是蜡烛图。蜡烛图是由日本人

js和vue的关系 Mar 11, 2024 pm 05:21 PM

js和vue的关系：1、JS作为Web开发基石；2、Vue.js作为前端框架的崛起；3、JS与Vue的互补关系；4、JS与Vue的实践应用。

See all articles

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

回复讨论(解决方案)

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

记事本++7.3.1

SublimeText3汉化版

禅工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

热门话题