Question

所以我有一个按钮，它可以切换并显示视频。如果再次点击它将隐藏它，然后打开。它工作正常唯一的问题是，当你第一次点击它时，你必须点击它两次因为某种原因我似乎无法弄明白。

function togglevid() {
    var e = document.getElementById("movie");
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
    if (e.pause == false) e.pause()
    else e.pause()
}

#movie {
    position:absolute;
    top:158px;
    left:470px;
    display:none;
    z-index:10
}

<video controls="" height="400" id="movie" oncontextmenu="return false;"
    width="960">
    <source src="" type="video/mp4">
    Your browser does not support HTML5 video.</video>

<input id="mcodebtn" onclick="togglevid()" type="button" value=
                "">

我相信这个错误的原因是我有视频设置显示的事实：无;默认情况下。

Answer 1

尝试用window.getComputedStyle()代替e.style.display

＆＃13;

function togglevid() {
  var e = document.getElementById("movie");
  e.style.display = window.getComputedStyle(e, null)
                    .getPropertyValue("display") === "none" 
                    ? "block" : "none";
}

＆＃13;

#movie {
  position: absolute;
  top: 158px;
  left: 470px;
  display: none;
  z-index: 10
}

＆＃13;

<video controls="" height="400" id="movie" oncontextmenu="return false;" width="960">
  <source src="" type="video/mp4">
    Your browser does not support HTML5 video.</video>

<input id="mcodebtn" onclick="togglevid()" type="button" value="toggle">

＆＃13;

JavaScript使用按钮切换

1 个答案: