我想通过单击 .switch 在两个图标之间切换，并将 .nightTextNight 样式应用于我的 JavaScript 代码 .nightText除了这里之外，其他地方都可以使用。
有人可以建议我任何其他方法来使其更简单吗？ 因为，对于每一个小变化，我都需要创建两个类并给它一个 id。
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className = "nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
}body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>最佳答案
它不起作用，因为你有两个类:
nightText nightTextNight
所以你需要检查:
if(nightText.className === "nightText nightTextNight")
var nightBtn = document.getElementById("switch");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");
var nightText = document.getElementById("nightText");
function nightMode() {
nightBtn.classList.toggle("switchNight");
body.classList.toggle("night");
navbar.classList.toggle("navbarNight");
nightText.classList.toggle("nightTextNight");
if(nightText.className === "nightText nightTextNight") {
nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
} else {
nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
};
console.log(nightText.className);
}body {
background-color: white;
transition: background-color ease 0.3s;
padding: 0;
margin: 0;
font-family: sans-serif;
}
.night {
background-color: #3f4b5e;
transition: background-color ease 1s;
}
.switch {
height: 35px;
width: 35px;
border-radius: 50%;
background-color: #092d30;
border: 3px solid wheat;
float: right;
z-index: 4;
transition: background-color ease 1s;
margin-top: 12px;
margin-right: 4px;
cursor: pointer;
text-align: center;
line-height: 17.5px;
position: relative;
}
.switchNight {
background-color: wheat;
border: 3px solid #092d30;
z-index: 4;
transition: background-color ease 1s;
}
.textNight {
color: white;
}
.switch:hover {
background-color: #4d5e77;
transition: background-color ease 1s;
}
.switchNight:hover {
background-color: #fff2d8;
transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
width: 100%;
height: auto;
background: #f4f7f9;
position: fixed;
margin-top: 0;
padding: 0;
border-bottom: 3px solid #2fb3f9;
}
.navbar li {
list-style-type: none;
display: inline;
height: auto;
}
.navbar li a {
padding: 20px 25px;
text-decoration: none;
display: inline-block;
font-size: 20px;
font-weight: bolder;
color: #516f7f;
}
.navbar li a:hover {
color: #ff9d00;
transition: color ease 0.3s;
}
.navbarNight {
background-color: #556bb5;
border-bottom: 3px solid white;
}
.navbarNight li a {
color: white;
}
.nightText {
position: absolute;
color: white;
font-weight: bolder;
top: 9px;
right: 12px;
}
.nightTextNight {
color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<title>Night Mode - TEST</title>
</head>
<body id="body">
<div id="container">
<div id="nav">
<ul id="navbar" class="navbar">
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><div id="switch" class="switch" onclick="nightMode()"><span id="nightText" class="nightText"><i class="fa fa-moon-o" aria-hidden="true"></i></span></div></li>
</ul>
</div>
</div>
<script src="script.js"></script>
</body>
</html>PD:我添加了 console.log(nightText.className); 来显示类，您可以将其删除。
关于javascript - 在 Javascript 中切换 innerHTML，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46625249/