Html document.getElementById("test").style.display="hidden" 不起作用

document.getElementById("test").style.display="hidden" not working

提问by namratha

I want to hide my form when I click on the submit button. My code is as follows:

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

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

But when I click on the "Find" button, that particular form is not being hidden.

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

回答by Nishanth Lawrence

It should be either

它应该是

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

or

或者

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

Second option will display some blank space where the form was initially present , where as the first option doesn't

第二个选项将在表单最初出现的地方显示一些空白，而第一个选项则没有

回答by Samuel Liew

Set CSS display property to none.

将 CSS display 属性设置为none。

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

Also, you do not needjavascript:for the onclickattribute.

此外，您不需要javascript:该onclick属性。

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

Finally, make sure you do not havemultiple elements with the same ID.

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

If your form goes nowhere, Phil suggested that you should prevent submission of the form. Simply return falsein the onsubmithandler.

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

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

If you want the form to post, but hide the div on subsequent page load, you will have to use server-side code to hide the element:

如果您希望表单发布，但在后续页面加载时隐藏 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>

回答by th3pirat3

Using jQuery:

使用jQuery：

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

Using Javascript:

使用 JavaScript：

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

Threw an error "Cannot set property 'display' of undefined"

抛出错误“无法设置未定义的属性‘显示’”

So, fix for this would be:

因此，对此的解决方法是：

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

where your html code will look like this:

您的 html 代码如下所示：

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

回答by Jared Nielsen

Replace hiddenwith none. See MDN reference.

替换hidden为none。请参阅MDN 参考。

回答by MarsOne

There are two ways of doing this.

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

Most of the answers have correctly pointed out that style.display has no value called "hidden". It should be none.

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

If you want to use "hidden" the syntax should be as follows.

如果要使用“隐藏”，则语法应如下所示。

object.style.visibility="hidden"

The difference between the two is the visibility="hidden" property will only hide the contents of you element but retain it position on the page. Whereas the display ="none" will hide your complete element and the rest of the elements on the page will fill that void created by it.

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

Check this illustration

检查这个插图

回答by jérémy goupil

Maybe you can add a class like 'hide'.

也许您可以添加一个类，例如“隐藏”。

Follow the example here : https://developer.mozilla.org/fr/docs/Web/API/Element/classList.

按照这里的示例：https: //developer.mozilla.org/fr/docs/Web/API/Element/classList。

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

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

回答by DevZer0

its a block element, and you need to use none

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

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

hiddenis used for visibility

hidden是用来 visibility

回答by Fixus

you need to use display = none

你需要使用 display = none

value hidden is connected with attributet called visibility

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

so your code should look like this

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

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

回答by codebreaker

this should be it try it.

这个应该可以试试吧。

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

回答by Dinesh

you can use something like this....divcontainer

你可以使用这样的东西......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>