document.getElementById("test").style.display="hidden" 不工作答案

【问题标题】：document.getElementById("test").style.display="hidden" not workingdocument.getElementById("test").style.display="hidden" 不工作
【发布时间】：2013-08-31 01:53:55
【问题描述】：

我想在单击提交按钮时隐藏我的表单。我的代码如下：

<script type="text/javascript">
    function hide() {
        document.getElementById("test").style.display = "hidden";
    }
</script>
<form method="post" id="test">
    <table width="60%" border="0" cellspacing="2" cellpadding="2">
        <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold"
        align="center">
            <td>Ample Id</td>
            <td>Find</td>
        </tr>
        <tr align="center" bgcolor="#E8F8FF" style="color:#006">
            <td>
                <input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>"
                />
            </td>
            <td>
                <input type="image" src="../images/btnFind.png" id="find" name="find"
                onclick="javascript:hide();" />
            </td>
        </tr>
    </table>
</form>

但是当我点击“查找”按钮时，该特定表单并没有被隐藏。

【问题讨论】：

因为display 没有hidden 的属性。试试none。
提示：阅读addEventListener。
在你修复“none”问题后，表单会在下一页加载时提交，表单将再次显示......

标签： javascript html

【解决方案1】：

应该是

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

或

document.getElementById("test").style.visibility = "hidden";

第二个选项会在表单最初出现的地方显示一些空白，而第一个选项不会

【讨论】：

【解决方案2】：

将 CSS 显示属性设置为 none。

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

另外，对于onclick 属性，您不需要 javascript:。

<input type="image" src="../images/btnFind.png" id="find" name="find" 
    onclick="hide();" />

最后，确保您没有多个元素具有相同的 ID。

如果您的表单无处可去，Phil 建议您阻止提交表单。只需在 onsubmit 处理程序中 return false。

<form method="post" id="test" onsubmit="return false;">

如果您希望表单发布，但在后续页面加载时隐藏 div，则必须使用服务器端代码来隐藏元素：

<script type="text/javascript">
function hide() {
    document.getElementById("test").style.display = "none";
}
window.onload = function() {
    // if form was submitted, PHP will print the below, 
    //    which runs function hide() on page load
    <?= ($_POST['ampid'] != '') ? 'hide();' : '' ?>
}
</script>

【讨论】：

可能也想阻止默认操作（表单提交）发生
但是当页面导航离开（到同一页面）时，您将看不到脚本的结果。事实上，我想说这正是 OP 所看到的，并假设表单没有被隐藏。
如果我使用 onsubmit="return false;" 它正在工作但我也希望显示结果。如果我使用 onsubmit="rturn false"，我将无法显示结果

【解决方案3】：

使用 jQuery：

   $('#test').hide();

使用 Javascript：

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

抛出错误“无法设置未定义的属性'display'”

所以，解决这个问题的方法是：

document.getElementById("test").style="display:none";

您的 html 代码将如下所示：

<div style="display:inline-block" id="test"></div>

【讨论】：

【解决方案4】：

将hidden 替换为none。见MDN reference。

【讨论】：

【解决方案5】：

有两种方法可以做到这一点。

大多数答案都正确指出 style.display 没有称为“隐藏”的值。应该没有。

如果你想使用“隐藏”，语法应该如下。

object.style.visibility="hidden"

两者的区别在于 visibility="hidden" 属性只会隐藏你元素的内容，但会保留它在页面上的位置。而 display ="none" 将隐藏您的完整元素，而页面上的其余元素将填补由它创建的空白。

查看illustration

【讨论】：

【解决方案6】：

它是一个块元素，你需要使用none

document.getElementById("test").style.display="none"

hidden 用于visibility

【讨论】：

当心你的答案中古怪的引号字符（即“），因为人们会从这里复制和粘贴:)

【解决方案7】：

也许你可以添加一个像“隐藏”这样的类。

按照此处的示例进行操作：https://developer.mozilla.org/fr/docs/Web/API/Element/classList。

document.getElementById("test").classList.add("anotherclass");

【讨论】：

【解决方案8】：

你需要使用display = none

隐藏的值与名为visibility的属性连接

所以你的代码应该是这样的

<script type="text/javascript">
function hide(){
document.getElementById("test").style.display="none";
}
</script>

【讨论】：

@namratha 向该函数发出警报。我敢打赌它没有被调用。如果您使用 onclick 事件，则无需编写 javascript:hide() simple hide();够了
我使用了警报并调用了检查功能，但是当我单击查找按钮时该表单部分没有隐藏

【解决方案9】：

你可以使用这样的东西......div容器

<script type="text/javascript">
function hide(){
document.getElementById("test").innerHTML.style.display="none";
}
</script>
<div id="test">
<form method="post" >

<table width="60%" border="0" cellspacing="2" cellpadding="2"  >
  <tr style="background:url(../images/nav.png) repeat-x; color:#fff; font-weight:bold" align="center">
    <td>Ample Id</td>
    <td>Find</td>
  </tr>

  <tr align="center" bgcolor="#E8F8FF" style="color:#006" >
    <td><input type="text" name="ampid" id="ampid" value="<?php echo $_POST['ampid'];?>" /></td>
   <td><input type="image" src="../images/btnFind.png" id="find" name="find" onclick="javascript:hide();"/></td>
   </tr>

</table>

</form>
</div>

【讨论】：

【解决方案10】：

通过 JavaScript

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

通过 Jquery

$('#test').hide();

【讨论】：

【解决方案11】：

这个应该试试吧。

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

【讨论】：