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

有關變換原點的更多信息

Answer 2

調整轉換的原點以及如下所示的轉換，您的按鈕將簡單地增大而不會移動：

 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-origin:left center; transform: rotate(-90deg) translateY(100%) ; } 

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