删除h1后拨动开关故障

Question

我有一个切换开关，一切都工作得很好，但是一旦我删除了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>

Answer 1

您只需要为按钮设置浮动的初始值。

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>