使用 javascript 隐藏 Html 元素

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17560867/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:56:31  来源:igfitidea点击:

hide Html elements by using javascript

javascripthtml

提问by Fawaz

How can i hide html elements by using javascript if i have this html page

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

i want to hide all elements except div with id number 2 to be page like this

我想隐藏除 div 之外的所有元素,ID 为 2 是这样的页面

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

回答by Mark Kasson

In addition to DevlshOne's answer, you could also use css to make it not display:

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

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

There's a difference between the two. With visibility hidden, the space will still be consumed by the div, but you can't see it. With display='none', its as if its not there.

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

Pick the better one for you.

为您选择更好的。

回答by user2555312

you will need to use something like this:

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

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

回答by Max West

Answers above are all basically correct, but you need to be aware of a difference between display = "none" & visibility = "hidden". With display "none" the element is removed from the layout of elements on the page. With visibility "hidden" the element still occupies its space, you just don't see it anymore.

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

回答by DevlshOne

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

document.getElementByIdon MDN

document.getElementById在 MDN 上

回答by Mojtaba Nava

You can use JQUERY : $('#1').hide()

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

Great

伟大的