使用 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
hide Html elements by using javascript
提问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';
回答by Mojtaba Nava
You can use JQUERY : $('#1').hide()
您可以使用 JQUERY : $('#1').hide()
Great
伟大的