如何根据浏览器的宽度隐藏某个div

llkevin13579 2015-08-07 08:51:38

现在我的网页上有两个div
我想当浏览器的宽度小于1024px的时候
自动隐藏掉其中一个div
请问要怎么实现



<div>

第一个div

</div>

<div>

第二个div

</div>

...全文

220 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

番茄大大大 2015-08-07

打赏
举报

引用 3 楼 llkevin13579 的回复:

[quote=引用 1 楼 u013438193 的回复:] <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function() { if (document.documentElement.clientWidth < 2000) { document.getElementById('div1').style.display = "none" } } </script> </head> <body> <div id="div1">第一个div</div> <div id="div2">第二个div</div> </body> </html>

那可以动态的改变大小吗也就是我再加载完页面之后调整浏览器的宽度时可以不断判断宽度而不是光在加载页面的时候根据浏览器大小隐藏div[/quote] 那你就需要的不是加载事件而是窗口改变事件了代码这样

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	window.onresize = function() {
		if (document.documentElement.clientWidth < 1024) {
			document.getElementById('div1').style.display = "none";
		}else{
			document.getElementById('div1').style.display = "";
		}
	}
</script>
</head>
<body>


	<div id="div1">第一个div</div>
	<div id="div2">第二个div</div>

</body>
</html>

兄弟刚开始学js？可以自己多百度一下其实我也是初学者

llkevin13579 2015-08-07

打赏
举报

引用 2 楼 u013438193 的回复:

把上文的2000改成1024就可以了……就是在加载页面的时候调用一个js判断浏览器的宽度如果宽度小于某个值就把某个id对应的div的display设置为none就行了不知道这里能不能二连楼……可是似乎没法编辑法国的帖子

那可以动态的改变大小吗也就是我再加载完页面之后调整浏览器的宽度时可以不断判断宽度而不是光在加载页面的时候根据浏览器大小隐藏div

llkevin13579 2015-08-07

打赏
举报

引用 1 楼 u013438193 的回复:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function() { if (document.documentElement.clientWidth < 2000) { document.getElementById('div1').style.display = "none" } } </script> </head> <body> <div id="div1">第一个div</div> <div id="div2">第二个div</div> </body> </html>

那可以动态的改变大小吗也就是我再加载完页面之后调整浏览器的宽度时可以不断判断宽度而不是光在加载页面的时候根据浏览器大小隐藏div

番茄大大大 2015-08-07

打赏
举报

把上文的2000改成1024就可以了……就是在加载页面的时候调用一个js判断浏览器的宽度如果宽度小于某个值就把某个id对应的div的display设置为none就行了不知道这里能不能二连楼……可是似乎没法编辑法国的帖子

番茄大大大 2015-08-07

打赏
举报

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload = function() { if (document.documentElement.clientWidth < 2000) { document.getElementById('div1').style.display = "none" } } </script> </head> <body> <div id="div1">第一个div</div> <div id="div2">第二个div</div> </body> </html>

本课程是带领大家学习Pc端网页、app、小程序的布局以及样式添加，学完本课程，大家可以对任意网页实现布局，思路清新。课程简介：1，html5编辑器的介绍和使用2，块标签3，内联标签4，超链接和锚点5，12种选择器6，颜色7，单位8，css属性9，盒模式10，div布局11，内容图片12，布局图片13，用户交互图片14，字体15，表单16，表格17，浮动18，定位19，内联框架20，搜索引擎优化21，实战案例

目录基本概念关键代码基本概念这里是用css来搞的，本人的开发环境为Vue cli IDE为 webStorm。这里使用这个 @media screen and (XXXXXX)老浏览器是不支持的！！！当分辨率小了就会调用这个代码隐藏某div或者nav可以使用 visibility hidden或者 opacity 0 这些操作都是很骚气...

我们在做响应页面时，想在某个分辩率下把某个标签自动隐藏。比如导航，在正常分辨率下，显示宽的导航，在手机屏幕下，宽的导航自动隐藏，刚显示手机版的导航。这里我们就要用到媒体查询 @media，代码如下： @media screen and (max-width:320px){ .nav{display:none; } } 上面代码表示在小于320px的分辩率,标签nav自动隐藏。以上是CSS...

监听某个DIV的尺寸变化背景： vue项目中用到echarts图表，页面上有侧边栏，侧边栏收缩图表不能自适应，想通过监听内容部分的宽度让图表resize，但是用window带的resize，只能监听浏览器窗口大小变化，像侧边导航隐藏的这种情况不能人echarts重置。为了监听某元素区域的变化而使echarts的尺寸重置，我第一时间想到的是resize事件，但是实际试了试，发现并不能起到我想要的效果，加在DIV上的resize事件根本不能触发，后来百度了一下，发现resize只能加在window对象上，并

div的宽度设置为100%，并设置其背景颜色，但当窗口发生变化出现横向滚动条，拉滚动条的时候发现右面是空白的。解决方法：body{min-width:1024px},给body加上一个最小宽度。ie浏览器下的高度和标准浏览器下的高度不一致，尽量不设置高度，如果设置高度，使用百分比。转载于:https://www.cnblogs.com/zhanghuijing/p/6814004...