javascript - 在 ASP.NET 中使用 javascript 隐藏和显示 div

Question

我想在单击按钮后显示音频播放器。这是我的代码

<script type="text/javascript">
    function viewAudio() {
        document.getElementById('myAudio').style.display = ""
    }
    document.getElementById('myAudio').style.display = "none"


</script>

<button value="@Html.DisplayFor(modelItem => item.SampleURL)" id="audioViewer" onclick="viewAudio()">
            <img src="../../Content/images/audio.png"></button>

<div id="myAudio">
<audio controls preload="none">
    <source src="#" type="audio/mp3">
</audio>
</div>

但是，当我在浏览器中运行时，它仍然显示音频播放器。 有什么解决办法吗？

Answer 1

首先，要让播放器默认隐藏，您不需要使用 JavaScript。将这样的样式添加到容器中:

 <div id="myAudio" style="display: none;">

单击按钮后将其显示出来:

function viewAudio() {
    document.getElementById('myAudio').style.display = "block";
}