使用 javascript 隐藏 Html 元素

Question

如果我有这个 html 页面，我如何使用 javascript 隐藏 html 元素

<body>

<h1>test</h1>

<div id="1" align="center" style="padding-top: 10%;" >
 <h1 style="color: #FFFFFF">fawazapp</h1>
 <p style="color: #C0C0C0;"> bbb</p>
 <p style="color: #FFFFFF;">aaaaaaaaa</p>

 </div>

<div id="2" align="center" style="padding-top: 10%;" >
 <h1 style="color: #FFFFFF">fawazapp</h1>
 <p style="color: #C0C0C0;"> bbb</p>
 <p style="color: #FFFFFF;">aaaaaaaaa</p>

 </div>

</body>

我想隐藏除 id 为 2 的 div 以外的所有元素，使其成为这样的页面

<div id="2" align="center" style="padding-top: 10%;" >
 <h1 style="color: #FFFFFF">fawazapp</h1>
 <p style="color: #C0C0C0;"> bbb</p>
 <p style="color: #FFFFFF;">aaaaaaaaa</p>

 </div>

Answer 1

除了DevlshOne的答案，您还可以使用css使其不显示：

var divOne = document.getElementById('1');
divOne.style.display='none';

这两者之间存在差异。 隐藏可见性后，div仍将占用空间，但您无法看到它。 使用display ='none'，就好像它不存在一样。

为您挑选更好的一个。

Answer 2

你需要使用这样的东西：

document.getElementById("1").style.display = "none";

Answer 3

上面的答案基本上都是正确的，但你需要注意display =“none”和visibility =“hidden”之间的区别。 显示“无”时，元素将从页面上的元素布局中删除。 随着可见性“隐藏”，元素仍然占据其空间，你只是不再看到它。

Answer 4

var divOne = document.getElementById('1');
divOne.style.visibility = 'hidden';

MDN上的document.getElementById

Answer 5

你可以使用JQUERY： $('#1').hide()

大

使用 javascript 隐藏 Html 元素

问题描述

5 个解决方案

解决方案1
25 已采纳 2013-07-10 01:34:55

解决方案2
10 2013-07-10 01:31:50

解决方案3
6 2014-11-10 21:13:22

解决方案4
2 2013-07-10 01:12:18

解决方案5
0 2019-04-30 07:44:03

使用 javascript 隐藏 Html 元素

问题描述

5 个解决方案

解决方案1 25 已采纳 2013-07-10 01:34:55

解决方案2 10 2013-07-10 01:31:50

解决方案3 6 2014-11-10 21:13:22

解决方案4 2 2013-07-10 01:12:18

解决方案5 0 2019-04-30 07:44:03

解决方案1
25 已采纳 2013-07-10 01:34:55

解决方案2
10 2013-07-10 01:31:50

解决方案3
6 2014-11-10 21:13:22

解决方案4
2 2013-07-10 01:12:18

解决方案5
0 2019-04-30 07:44:03