JavaScript 用按钮切换

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=
                "">

我认为此错误的原因是我设置了要显示的视频：none；默认情况下。

Answer 1

试试下面的代码，style 属性应该设置为 display:none.

问题是您正在尝试访问 style 属性然后访问 display 值。但是第一次运行时，video 标签没有设置任何 style 属性。

function togglevid() {
    var s = document.getElementById("newcode");
    var e = document.getElementById("movie");
    if (e.style.display == 'none') e.style.display = 'block';
    else e.style.display = 'none';
    if (s.style.display == 'none') s.style.display = 'block';
    else s.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" 
       style="display:none;"><!-- Here we set a default value for style attr-->
    <source src="" type="video/mp4">
    Your browser does not support HTML5 video.</video>

<input id="mcodebtn" onclick="togglevid()" type="button" value=
                "">

Answer 2

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

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

#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="toggle">

JavaScript 用按钮切换

JavaScript Toggle with button

javascript

css

toggle

togglebutton

html5-video