2
.switchをクリックして2つのアイコンの切り替えを行い、.nightTextNightのスタイルを.nightTextに適用すると、JavaScriptコードがここ以外で動作します。JavascirptでinnerHTMLを切り替える
誰も私にそれを簡単にする他の方法を提案することができますか？ 小さな変更ごとに2つのクラスを作成して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() {
\t nightBtn.classList.toggle("switchNight");
\t body.classList.toggle("night");
\t navbar.classList.toggle("navbarNight");
\t nightText.classList.toggle("nightTextNight");
\t if(nightText.className = "nightTextNight") {
\t \t nightText.innerHTML = "<i class='fa fa-sun-o' aria-hidden='true'></i>";
\t } else {
\t \t nightText.innerHTML = "<i class='fa fa-moon-o' aria-hidden='true'></i>";
\t };
}body {
\t background-color: white;
\t transition: background-color ease 0.3s;
\t padding: 0;
\t margin: 0;
\t font-family: sans-serif;
}
.night {
\t background-color: #3f4b5e;
\t transition: background-color ease 1s;
}
.switch {
\t height: 35px;
\t width: 35px;
\t border-radius: 50%;
\t background-color: #092d30;
\t border: 3px solid wheat;
\t float: right;
\t z-index: 4;
\t transition: background-color ease 1s;
\t margin-top: 12px;
\t margin-right: 4px;
\t cursor: pointer;
\t text-align: center;
\t line-height: 17.5px;
\t position: relative;
}
.switchNight {
\t background-color: wheat;
\t border: 3px solid #092d30;
\t z-index: 4;
\t transition: background-color ease 1s;
}
.textNight {
\t color: white;
}
.switch:hover {
\t background-color: #4d5e77;
\t transition: background-color ease 1s;
}
.switchNight:hover {
\t background-color: #fff2d8;
\t transition: background-color ease 1s;
}
/* --------------------- NAV BAR ------------------ */
.navbar {
\t width: 100%;
\t height: auto;
\t background: #f4f7f9;
\t position: fixed;
\t margin-top: 0;
\t padding: 0;
\t border-bottom: 3px solid #2fb3f9;
}
.navbar li {
\t list-style-type: none;
\t display: inline;
\t height: auto;
}
.navbar li a {
\t padding: 20px 25px;
\t text-decoration: none;
\t display: inline-block;
\t font-size: 20px;
\t font-weight: bolder;
\t color: #516f7f;
}
.navbar li a:hover {
\t color: #ff9d00;
\t transition: color ease 0.3s;
}
.navbarNight {
\t background-color: #556bb5;
\t border-bottom: 3px solid white;
}
.navbarNight li a {
\t color: white;
}
.nightText {
\t position: absolute;
\t color: white;
\t font-weight: bolder;
\t top: 9px;
\t right: 12px;
}
.nightTextNight {
\t color: black;
}<!DOCTYPE html>
<html lang="en">
<head>
\t <meta charset="UTF-8">
\t <link rel="stylesheet" href="style.css">
\t <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
\t <title>Night Mode - TEST</title>
</head>
<body id="body">
\t <div id="container">
\t \t <div id="nav">
\t \t \t <ul id="navbar" class="navbar">
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">About me</a></li>
\t \t \t \t <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>
\t \t \t </ul>
\t \t </div>
\t </div>
\t <script src="script.js"></script>
</body>
</html>
' 'if（nightText.className ===" nightTextNight "）' – MarioZ