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>

感谢您的帮助！

Answer 1

将onclick函数重命名为click()

以外的其他内容

example我只是将其重命名为toggle()，您可以看到它正常运作。

用于显示/隐藏div无效的Javascript

1 个答案: