javascript - 更改按钮 JavaScript 的位置

Question

我想更改显示在 html 页面顶部的按钮

<div class='play'>
    <input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" />
</div>
<div class='pause'>     
    <input id="pause" type="button" value="Pause" onclick="mode('pause');startSlideshow();" />
</div>

<style>
    .play{
        position: absolute;
        top:452px;
        left: 85px          
    }
    .pause{
        position: absolute;
        top:452px;
        left: 85px          
    }
</style>

到目前为止，这在播放按钮前面显示了暂停按钮，没关系，我尝试移动按钮并使其隐藏但它确实移动了，我还尝试更改暂停按钮的样式和位置但是无论如何它都不会移动

else if(smode=="pause")
{
    var pau = document.getElementById('pause'); 
    pau.setAttribute('style', 'top:100px;left:150px;');
    document.getElementById("pause").style.visibility = "hidden";
}

Answer 1

此代码将切换您的播放和暂停按钮，因此一次只会显示一个。

function mode(action) {
  
  console.log(action);
  if(action == 'play') {
    document.getElementById('play').style.display = "none";
    document.getElementById('pause').style.display = "block";
  }
  if(action == 'pause') {
    document.getElementById('play').style.display = "block";
    document.getElementById('pause').style.display = "none";
  }
}

<div class='play'>
    <input id="play" type="button" value="Play" onclick="mode('play');" />
</div>
<div class='pause'>     
    <input id="pause" style="display:none;" type="button" value="Pause" onclick="mode('pause');" />
</div>