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

llkevin13579 2015-08-07 08:51:38

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



<div>

第一个div

</div>

<div>

第二个div

</div>

...全文

233 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>