显示/隐藏 div 的 Javascript 无法正常工作

<分区>

编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。

关闭 7 年前。

Improve this question

我对 javascript 编码比较陌生，只做 html\css，所以我用 JS 写了这个函数，隐藏和显示一个 div，但它似乎根本不起作用，你能告诉我这是什么吗我做错了吗？

Javascript:

<script type="text/javascript">

function click()
{

    if (document.getElementById("div1").style.opacity == "1")
    {
        document.getElementById("div1").style.height="0px";
        document.getElementById("div1").style.width="0%";
        document.getElementById("div1").style.opacity="0";
    }

    else
    {
        document.getElementById("div1").style.height="400px";
        document.getElementById("div1").style.width="60%";
        document.getElementById("div1").style.opacity="1";
    }


}

</script>

下面是我正在处理的 HTML 代码:

<boutton onclick="click()">TEST CLICK</button>
<div id="div1">Random text in here...</div>

还有 STYLE 标签:

<style>
#div1
{
    background-color: rgba(0, 0, 0, 0.4);
    color: #CBA303;
    font-weight: bold;
    text-align: center;
    border-radius: 20px;
    box-shadow: 10px 10px 15px gray;
    height: 0px;
    width: 0%;
    padding: 10px;
    font-size: 2em;
    font-family: sans-serif;
    z-index: 10;
    position: absolute;
    top: 20%;
    left: 20%;
    opacity: 0;
    transition: height,width,opacity 1s ease;
}
</style>

感谢您的帮助!

最佳答案

将您的 onclick 函数重命名为 click() 之外的其他名称>

example在这里，我只是将它重命名为 toggle()，您可以看到它正在运行。

关于显示/隐藏 div 的 Javascript 无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33486857/