javascript 如何在javascript中动态隐藏对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8556593/
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
How to dynamically hide an object in javascript
提问by rdelfin
I have a webpage where you can log in with your account. The idea is that when you press your name a small square appears (similar to what stackoverflow does) with some of your basic information (name, email, etc.) It's a mix of php, css and javascript but the php is only to chose the name of the user. So, I have the following code:
我有一个网页，您可以在其中使用您的帐户登录。这个想法是，当你按下你的名字时，会出现一个小方块（类似于 stackoverflow 所做的）以及你的一些基本信息（姓名、电子邮件等）。它是 php、css 和 javascript 的混合，但 php 只是为了选择用户名。所以，我有以下代码：
<style type="text/css">
table.UserInfo
{
background-color:#000;
width:100;
height:100;
position:fixed;
top:10px;
right:10px;
}
p.UserText
{
color:#FFF;
}
</style>
<script type="text/javascript">
function showUser()
{
//Unknown code here
}
</script>
In some part of the page...: Welcome visitor !
在页面的某些部分...：欢迎访问者！
The visitor is actually set via php to a user that logged in or visitor if there is none. Here is the box:
访问者实际上是通过 php 设置为登录的用户或访问者（如果没有）。这是盒子：
<table class='UserInfo' id='UserInfo' >
<tr>
<td><p class='UserText'>This user is a guest user. There is no information available.</p></td>
</tr>
</table>
So, I need the box to appear when I press visitor, so the code would go in showUser() and I need to know where I have to put my javascript code so the box is initially hidden. For the box showing when I presssed it I tried putting this code in the showUser() function:
因此，我需要在按下访问者时显示该框，因此代码将进入 showUser() 并且我需要知道必须将 javascript 代码放在哪里，以便该框最初是隐藏的。对于按下时显示的框，我尝试将此代码放入 showUser() 函数中：
document.getElementById('UserInfo')style.visibility = 'hidden';
But it didn't work. I put it hidden because it starts of as visible.
但它没有用。我把它隐藏起来，因为它开始是可见的。
Thank you
谢谢
采纳答案by hackartist
That is the correct way to do it but you need to have a dot between the getElementById and the style property for the javascript code to work. If you want to have the element start off as hidden either give it a class where
这是正确的方法，但您需要在 getElementById 和 style 属性之间添加一个点，以便 javascript 代码工作。如果你想让元素开始隐藏，要么给它一个类
visibility:hidden;
or you can put it as the inline style for the hidden element. You could also do it in javascript when the load event fires but it is better to do it in the html because if the page takes a long time to render then the user will see what was supposed to be hidden until the ready event fires. Best of luck.
或者你可以把它作为隐藏元素的内联样式。您也可以在加载事件触发时在 javascript 中执行此操作，但最好在 html 中执行此操作，因为如果页面需要很长时间来呈现，那么用户将看到应该隐藏的内容，直到就绪事件触发。祝你好运。
回答by Julian
You could also do this:
你也可以这样做：
var_name = document.getElementById("idname").style.display = 'none';
回答by Alex Shilman
Or jquery:
或者jquery：
$('.anyClass').fadeOut('fast');
