在Javascript中切换innerHTML

我想通过点击

.switch

在两个图标之间切换，并将

.nightTextNight

的样式应用到

.nightText

，我的JavaScript代码可以在除此处之外的任何地方工作

有人能给我建议其他更简单的方法吗？ 因为，对于每一个微小的更改，我需要创建两个类并给它一个id

var nightBtn=document.getElementById（“开关”）；
var body=document.getElementById（“body”）；
var header=document.getElementById（“header”）；
var navbar=document.getElementById（“navbar”）；
var nightText=document.getElementById（“nightText”）；
函数nightMode（）{
nightBtn.classList.toggle（“switchNight”）；
body.classList.toggle（“夜间”）；
navbar.classList.toggle（“navbarNight”）；
nightText.classList.toggle（“nightTextNight”）；
如果（nightText.className=“nightTextNight”）{
nightText.innerHTML=“”；
}否则{
nightText.innerHTML=“”；
};
}

正文{
背景色：白色；
过渡：背景色0.3s；
填充：0；
保证金：0；
字体系列：无衬线；
}
.晚上{
背景色：#3f4b5e；
过渡：背景色轻松1s；
}
.开关{
高度：35px；
宽度：35px；
边界半径：50%；
背景色：#092d30；
边界：3倍实心小麦；
浮动：对；
z指数：4；
过渡：背景色轻松1s；
边缘顶部：12px；
保证金权利：4px；
光标：指针；
文本对齐：居中；
线高：17.5px；
位置：相对位置；
}
.一夜情{
背景色：小麦；
边框：3px实心#092d30；
z指数：4；
过渡：背景色轻松1s；
}
.短信之夜{
颜色：白色；
}
.开关：悬停{
背景色：#4d5e77；
过渡：背景色轻松1s；
}
.switchNight:悬停{
背景色：#fff2d8；
过渡：背景色轻松1s；
}
/*---------导航条------------------*/
navbar先生{
宽度：100%；
高度：自动；
背景#f4f7f9；
位置：固定；
边际上限：0；
填充：0；
边框底部：3px实心#2fb3f9；
}
李国宝先生{
列表样式类型：无；
显示：内联；
高度：自动；
}
李娜先生{
填充：20px 25px；
文字装饰：无；
显示：内联块；
字体大小：20px；
字体大小：粗体；
颜色：#516f7f；
}
李娜：悬停{
颜色：#ff9d00；
过渡：色缓0.3s；
}
纳夫巴奈特先生{
背景色：#556bb5；
底部边框：3倍纯白；
}
李嘉诚先生{
颜色：白色；
}
.nightText{
位置：绝对位置；
颜色：白色；
字体大小：粗体；
顶部：9px；
右：12px；
}
.nightTextNight{
颜色：黑色；
}

夜间模式-测试

您只需切换图标类，而无需更改整个

i

标记

var nightBtn = document.getElementById("switch");
var nightBtnIcon = document.getElementById("switch-icon");
var body = document.getElementById("body");
var header = document.getElementById("header");
var navbar = document.getElementById("navbar");

function nightMode() {
    nightBtn.classList.toggle("switchNight");
    body.classList.toggle("night");
    navbar.classList.toggle("navbarNight");
    nightBtnIcon.classList.toggle("fa-sun-o");
    nightBtnIcon.classList.toggle("fa-moon-o");
}

HTML:

<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()"><i class="icon fa fa-moon-o" aria-hidden="true" id=“switch-icon”></i></span></div></li>
            </ul>

在div中，甚至在body中，包装所有可能有

night

样式不同的元素，然后将

night

类应用于该包装器

然后，您可以沿以下行向元素添加不同的样式：

.晚安，导航栏{
…只是与夜晚有关的风格差异。。。
}

---

然后，切换只需在包装元素中添加或删除类。您仍然需要为您想要更改的内容添加新类，但这只适用于您想要更改的属性。

这不起作用，因为您有两个类：

nightText nightTextNight

因此，您需要检查：

if(nightText.className === "nightText nightTextNight")

var nightBtn=document.getElementById（“开关”）；
var body=document.getElementById（“body”）；
var header=document.getElementById（“header”）；
var navbar=document.getElementById（“navbar”）；
var nightText=document.getElementById（“nightText”）；
函数nightMode（）{
nightBtn.classList.toggle（“switchNight”）；
body.classList.toggle（“夜间”）；
navbar.classList.toggle（“navbarNight”）；
nightText.classList.toggle（“nightTextNight”）；
如果（nightText.className==“nightText nightTextNight”）{
nightText.innerHTML=“”；
}否则{
nightText.innerHTML=“”；
};
log（nightText.className）；
}

正文{
背景色：白色；
过渡：背景色0.3s；
填充：0；
保证金：0；
字体系列：无衬线；
}
.晚上{
背景色：#3f4b5e；
过渡：背景色轻松1s；
}
.开关{
高度：35px；
宽度：35px；
边界半径：50%；
背景色：#092d30；
边界：3倍实心小麦；
浮动：对；
z指数：4；
过渡：背景色轻松1s；
边缘顶部：12px；
保证金权利：4px；
光标：指针；
文本对齐：居中；
线高：17.5px；
位置：相对位置；
}
.一夜情{
背景色：小麦；
边框：3px实心#092d30；
z指数：4；
过渡：背景色轻松1s；
}
.短信之夜{
颜色：白色；
}
.开关：悬停{
背景色：#4d5e77；
过渡：背景色轻松1s；
}
.switchNight:悬停{
背景色：#fff2d8；
过渡：背景色轻松1s；
}
/*---------导航条------------------*/
navbar先生{
宽度：100%；
高度：自动；
背景#f4f7f9；
位置：固定；
边际上限：0；
填充：0；
边框底部：3px实心#2fb3f9；
}
李国宝先生{
列表样式类型：无；
显示：内联；
高度：自动；
}
李娜先生{
填充：20px 25px；
文字装饰：无；
显示：内联块；
字体大小：20px；
字体大小：粗体；
颜色：#516f7f；
}
李娜：悬停{
颜色：#ff9d00；
过渡：色缓0.3s；
}
纳夫巴奈特先生{
背景色：#556bb5；
底部边框：3倍纯白；
}
李嘉诚先生{
颜色：白色；
}
.nightText{
位置：绝对位置；
颜色：白色；
字体大小：粗体；
顶部：9px；
右：12px；
}
.nightTextNight{
颜色：黑色；
}

夜间模式-测试

忽略id的最佳方法是使用

属性