javascript - innerHTML 改变时绝对元素的位置改变

Question

我有一个绝对定位在 div 中的按钮，当单击此按钮并且更改 innerHTML(以模拟播放按钮)时，按钮的位置会移动。我相信这是旋转转换的问题。我怎样才能解决这个问题，使按钮不动？任何帮助将不胜感激。

const playButton = document.querySelector('#play');
let paused = false;

playButton.addEventListener("click", function() {
    if (paused == true) {
        playButton.innerHTML = "Pause";
        paused = false;
    } else {
        playButton.innerHTML = "Play";
        paused = true;
    }
});

#outer {
  background-color: green;
  height: 100vh;
  width: 100vw;
  position: relative;
}
#play {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
}

<div id="outer">
<button id="play">Play</button>
</div>

Answer 1

这与宽度有关——因为暂停比播放长，变换原点将不同(默认是从中心开始)。为了解决这个问题，你可以给按钮一个固定的宽度:

const playButton = document.querySelector('#play');
let paused = false;

playButton.addEventListener("click", function() {
  if (paused == true) {
    playButton.innerHTML = "Pause";
    paused = false;
  } else {
    playButton.innerHTML = "Play";
    paused = true;
  }
});

#outer {
  background-color: green;
  height: 100vh;
  width: 100vw;
  position: relative;
}

#play {
  position: absolute;
  top: 50%;
  width: 5em;
  text-align: center;
  transform: translateY(-50%) rotate(-90deg);
}

<div id="outer">
  <button id="play">Play</button>
</div>

More information about transform origin