javascript - 为什么我的 HTML 元素不能留在页面底部?
问题描述
我已经尝试了多种方法来让它工作,但没有。
这是我的 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>
推荐阅读
- api - 我需要 alphaadvantage 的替代品来查看外汇相对于美元的价格
- ios - 在 Project Navigator 中单击 JSON 文件时 Xcode 冻结(并崩溃)
- numpy - 高维广播和
- c# - 如何在 Swift 中创建 SaS 令牌?
- javascript - 为什么这个变量没有在 javascript 中返回?
- html - 如何使用 Angular 11 预填充 html5 日期选择器
- python - 为什么我不能给我的 pygame 窗口命名或图标?
- r - R列出某个点后在全局环境中创建的所有变量
- python - 在pandas / python中使用group by function来获得总和,具有最大点和对应点的主题的最有效方法是什么
- postgresql - 在 PostgreSQL 中,散列子计划是什么意思,最终查询重写是什么?