20

如果我有这个 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>
4

5 回答 5

29

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

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

两者是有区别的。隐藏可见性后，空间仍会被 div 占用，但您看不到它。使用 display='none'，就好像它不存在一样。

为您选择更好的。

于 2013-07-10T01:34:55.560 回答
11

你将需要使用这样的东西：

document.getElementById("1").style.display = "none";
于 2013-07-10T01:31:50.187 回答
6

上面的答案基本上都是正确的，但是您需要注意 display = "none" & visibility = "hidden" 之间的区别。使用显示“无”，该元素将从页面上的元素布局中删除。在可见性“隐藏”的情况下，元素仍然占据它的空间，你只是再也看不到它了。

于 2014-11-10T21:13:22.530 回答
2 
var divOne = document.getElementById('1');
divOne.style.visibility = 'hidden';

document.getElementById在 MDN 上

于 2013-07-10T01:12:18.740 回答
0

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

伟大的

于 2019-04-30T07:44:03.330 回答