在Javascript中切换innerHTML

时间：2017-10-07 21:21:56

标签： javascript html css

我想通过点击.switch在两个图标之间切换，并将.nightTextNight的样式应用到.nightText，我的JavaScript代码可以在任何地方使用，除了这里。

任何人都可以建议我使用其他方法使其更简单吗？ 因为，对于每一个小小的改变，我需要创建两个类并给它一个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>

4 个答案:

答案 0 :(得分：1)

您只需切换图标类，而不是更改整个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>

答案 1 :(得分：1)

它没有工作，因为你有两个班级：

nightText nightTextNight

所以你需要检查：

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

＆＃13;
＆＃13; 
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);
}
＆＃13; 
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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

PD：我添加了console.log(nightText.className);来显示课程，您可以删除它。

答案 2 :(得分：0)

如果在div中甚至在正文中包含可能具有night样式不同的所有元素，那么只需将night类应用于该包装器。

然后，您可以按照以下方式为元素添加不同的样式：

.night .navbar { ... just night-related style differences ... }

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

答案 3 :(得分：0)

忽略ID以使用Attribute和loop的最佳方式，例如data-mode 看这个例子：

	var modes={
	day:{
	      switch:"switch", body:"day", navbar:"navbar",icon:"fa fa-moon-o"
		},
	night:{
	      switch:"switchNight switch", body:"night day", navbar:"navbarNight navbar",icon:"fa fa-sun-o"
	   }
	}
	function changeMode(arg){
		window.mode=arg;
		var elem=document.querySelectorAll('[data-mode]');
		for (var i=0; i<elem.length; i++){
			var key=elem[i].getAttribute("data-mode");
			elem[i].classList=modes[arg][key];
		}

	}
	window.mode="day";
	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 data-mode="body">
	<div>
		<div>
			<ul class="navbar" data-mode="navbar">
				<li><a href="#">Home</a></li>
				<li><a href="#">About me</a></li>
				<li><div class="switch" data-mode="switch" onclick="changeMode(mode=='night'?'day':'night');">
					<span class="nightText">
						<i class="fa fa-moon-o" data-mode="icon"></i>
					</span>
					</div>
				</li>
			</ul>
		</div>
	</div>
	<script src="script.js"></script>
</body>
</html>

相关问题
最新问题