简单的javascript隐藏内容功能不起作用答案

【问题标题】：Simple javascript hide content function isn't working简单的javascript隐藏内容功能不起作用
【发布时间】：2010-11-02 14:05:41
【问题描述】：

我的代码有什么问题？当我单击“显示/隐藏”按钮时，没有任何反应。

<html>
    <head>
    <title>Test</title>

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

    <style type="text/css">
        #content{
            border: 1px solid #003333;
            background-color: #000033;
            color: #ffffff;
            height: 500px;
            width: 500px;
            text-align: center;
            display: block;
        }
    </style>

    </head>

    <body>
        <form>
            <input type="button" value="Hide/Show" onclick="hidecontent()" />
        </form>

        <?php
            echo '<div id="content">Hello world!</div>';
        ?>
    </body>
</html>

【问题讨论】：

标签： php javascript html css

【解决方案1】：

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

请删除无后的分号。

【讨论】：

【解决方案2】：

这里的问题：

document.getElementById("content").style.display = "none;";
                                                        ^
                    ------------------------------------|

应该是：

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

如果您真的想显示/隐藏 div（如按钮 value 所示），您的函数应如下所示：

    function hidecontent(){
        var ds = document.getElementById("content");

        if (ds.style.display === 'block'){
           ds.style.display = 'none';
        }
        else {
           ds.style.display = 'block';
        }
    }

【讨论】：

【解决方案3】：

none 后面有一个分号。

【讨论】：