我已经尝试了多种方法来让它工作，但没有任何效果。
这是我的 HTML:
为了简单起见，这里有一个 jsfiddle https://jsfiddle.net/w1z9bahv/23/
我不明白为什么我不能让 footer 留在底部。我尝试过更改 JavaScript 中的暗模式功能，我尝试了多种不同的方法将元素定位在底部。
一旦我激活深色模式，我的页脚就会弹出并位于页面中间。我只想让它留在底部。
这是我当前的代码:
var darkModeOn = false;
function darkMode() {
var element = document.body;
var footer = document.getElementById("bottomText");
if (darkModeOn == false) {
document.getElementById("darkMode").innerHTML = "Light mode";
darkModeOn = true;
} else {
document.getElementById("darkMode").innerHTML = "Dark mode";
darkModeOn = false;
}
element.classList.toggle("darkMode");
footer.classList.toggle("darkMode");
}body {
position: relative;
background-color: white;
margin: 100px;
filter: invert(0%);
}
body.darkMode {
position: relative;
margin: 100px;
background-color: #222;
filter: invert(100%);
}
footer {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}
footer.darkMode {
position: fixed;
left: 0;
right: 0;
bottom: 0;
}<html>
<body>
<p>
Here is some irrelevant text
</p>
<button>
Here is an irrelivant button
</button>
<footer id="bottomText">
<span>here is my footer</span>
<span>why is it not on the bottom</span>
<span><u id="darkMode" onclick="darkMode()">Dark mode</u></span>
</footer>
</body>
</html>如果有更好的方法来添加暗模式功能，那也会有帮助:)
谢谢
最佳答案
您可以尝试以下方法:
var darkModeOn = false;
function darkMode() {
var element = document.body;
var footer = document.getElementById("bottomText");
var buttonToInvert = document.getElementById("buttonToInvert");
if (darkModeOn == false) {
footer.innerHTML = "Light mode";
darkModeOn = true;
} else {
footer.innerHTML = "Dark mode";
darkModeOn = false;
}
element.classList.toggle("darkMode");
buttonToInvert.classList.toggle("darkMode");
}body {
background-color: white;
margin: 100px;
}
body.darkMode {
margin: 100px;
background-color: #222;
}
button.buttonToInvert{
filter: invert(0%);
}
button.darkMode{
filter: invert(100%);
}
footer {
/*Do the font (maybe)*/
position: fixed;
left: 0;
right: 0;
bottom: 0;
}<html>
<head>
</head>
<body>
<p>
Here is some irrelevant text
</p>
<button id="buttonToInvert">
Here is an irrelivant button
</button>
<footer>
<span>here is my footer</span>
<span>why is it not on the bottom</span>
<span><u id="bottomText" onclick="darkMode()">Dark mode</u></span>
</footer>
</body>
</html>关于javascript - 为什么我不能让我的 HTML 元素留在页面底部？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52266078/