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>

到目前为止，这显示了播放按钮前面的暂停按钮，没关系，我试图移动按钮并将其隐藏但是它有动作，我也尝试更改暂停按钮的style.position但是它无论如何都不会移动

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

Answer 1

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

＆＃13;

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";
  }
}

＆＃13;

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

＆＃13;

更改按钮JavaScript的位置

1 个答案: