洗掉h1后切換開關出現故障

我有一個撥動開關，一切正常，但是一旦我洗掉了 h1 元素，我的開關就開始起作用了。最初它會完美地位于滑塊的中心，但現在它被偏移并粘在頂部。單擊按鈕后，它會回傳到其假定的位置。一旦重繪 頁面，它就會立即回傳到偏移狀態。

我究竟做錯了什么？

function SlideRight() {
  // Checks to see if the slider is to the left of the div
  if (document.getElementById("slider").style.float !== "right") {
    // If it is we will float the sliderBtn to the right and change the background of the housing to green
    document.getElementById("slider").style.float = "right";
    document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

    // Toggle dark mode on
    document.body.style.backgroundColor = "#595959";
    document.getElementById("header").style.color = "#e6e6e6";
    document.getElementById("press").style.color = "#e6e6e6";
  } else {
    // If clicked again the btn will move back to the left side and change the color back to original
    document.getElementById("slider").style.float = "left";
    document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

    // Toggle dark mode off
    document.body.style.backgroundColor = "#e6e6e6";
    document.getElementById("header").style.color = "#000";
    document.getElementById("press").style.color = "#000";
  }
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #e6e6e6;
}

html {
  height: 100%;
}

.main {
  display: table;
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

.container {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}

.slider {
  height: 100px;
  width: 200px;
  border-radius: 50px;
  background-color: #f2f2f2;
  margin: 0 auto;
  border: none;
  box-shadow: inset 0 0 7px #000;
}

.slideBtn {
  border: 1px solid transparent;
  height: 90px;
  margin-top: 4px;
  margin-left: 5px;
  margin-right: 5px;
  width: 90px;
  border-radius: 50px;
  background-color: silver;
  box-shadow: 0 0 5px #000;
}

<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
    <div class="container">
        <p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
        <div class="slider" id="slideHousing">
            <div class="slideBtn" id="slider" onclick="SlideRight()">

            </div>
        </div>
    </div>
</div>

uj5u.com熱心網友回復：

您只需要為按鈕設定浮動的初始值。

function SlideRight() {
  // Checks to see if the slider is to the left of the div
  if (document.getElementById("slider").style.float !== "right") {
    // If it is we will float the sliderBtn to the right and change the background of the housing to green
    document.getElementById("slider").style.float = "right";
    document.getElementById("slideHousing").style.backgroundColor = "#00ff00";

    // Toggle dark mode on
    document.body.style.backgroundColor = "#595959";
    document.getElementById("header").style.color = "#e6e6e6";
    document.getElementById("press").style.color = "#e6e6e6";
  } else {
    // If clicked again the btn will move back to the left side and change the color back to original
    document.getElementById("slider").style.float = "left";
    document.getElementById("slideHousing").style.backgroundColor = "#f2f2f2";

    // Toggle dark mode off
    document.body.style.backgroundColor = "#e6e6e6";
    document.getElementById("header").style.color = "#000";
    document.getElementById("press").style.color = "#000";
  }
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: #e6e6e6;
}

html {
  height: 100%;
}

.main {
  display: table;
  height: 100%;
  width: 100%;
  border: 1px solid transparent;
}

.container {
  display: table-cell;
  vertical-align: middle;
  border: 1px solid transparent;
}

.slider {
  height: 100px;
  width: 200px;
  border-radius: 50px;
  background-color: #f2f2f2;
  margin: 0 auto;
  border: none;
  box-shadow: inset 0 0 7px #000;
}

.slideBtn {
  float:left;
  border: 1px solid transparent;
  height: 90px;
  margin-top: 4px;
  margin-left: 5px;
  margin-right: 5px;
  width: 90px;
  border-radius: 50px;
  background-color: silver;
  box-shadow: 0 0 5px #000;
}

<h1 style="text-align: center;" id="header">Dark Mode</h1>
<div class="main">
    <div class="container">
        <p style="text-align: center;" id="press">Press button to toggle dark mode.</p>
        <div class="slider" id="slideHousing">
            <div class="slideBtn" id="slider" onclick="SlideRight()">

            </div>
        </div>
    </div>
</div>

標籤：javascripthtmlcss

上一篇：HTML<a>標簽在別處創建一個不可見的按鈕

下一篇：如何在JavaScript中為div的寬度變化設定影片？