如何在Javascript中动态隐藏对象

Posted 2023-02-21

【中文标题】如何在Javascript中动态隐藏对象

【英文标题】：How to dynamically hide an object in Javascript

【发布时间】：2012-01-23 07:17:12

【问题描述】：

我有一个网页，您可以在其中使用您的帐户登录。这个想法是，当您按下您的姓名时，会出现一个小方块（类似于 Stack Overflow 所做的），其中包含您的一些基本信息（姓名、电子邮件等）。它是 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>

在页面的某些部分...： 欢迎光临！

访问者实际上是通过 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>

所以，当我按下访问者时，我需要该框出现，因此代码将进入 showUser()，并且我需要知道我必须将我的 Javascript 代码放在哪里，以便最初隐藏该框。

对于我按下它时显示的框，我尝试将此代码放入 showUser() 函数中：

document.getElementById('UserInfo')style.visibility = 'hidden';

但它没有用。我把它隐藏了，因为它一开始是可见的。

【问题讨论】：

这是正确的做法，但是您丢失了按 id 获取元素和样式之间的点

谢谢，我发现的每一个来源都没有把点放在上面。另外，除了body标签中的de onLoad函数之外，你知道把javascript代码设置为最初隐藏的地方吗？

你可以直接把它放到 html 样式中……只要把一个可见性的类：隐藏或者内联到你想要的元素上。

好的，谢谢。做到了。

你能把它作为答案吗？我喜欢它。我想说它是正确的

【参考方案1】：

你也可以这样做：

var_name = document.getElementById("idname").style.display = 'none';

【讨论】：

我试图隐藏一个 div onclick，这是唯一可行的方法，我正在尝试 visibility = "hidden"。 Javascript 有时会变得很尴尬，感谢您的回答！

【参考方案2】：

这是正确的方法，但您需要在 getElementById 和 style 属性之间添加一个点，以便 javascript 代码正常工作。如果您想让元素以隐藏状态开始，请给它一个类，其中

visibility:hidden;

或者你可以把它作为隐藏元素的内联样式。您也可以在加载事件触发时在 javascript 中执行此操作，但最好在 html 中执行此操作，因为如果页面需要很长时间才能呈现，那么用户将看到应该隐藏的内容，直到 ready 事件触发。祝你好运。

【参考方案3】：

或者jquery：

$('.anyClass').fadeOut('fast');