标签：function center 效果 color classList 切换 active 图标 icon
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Icon Toggle</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f0f2f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.icon-container {
display: flex;
align-items: center;
cursor: pointer;
}
.icon {
font-size: 2em;
color: #007bff;
transition: color 0.3s;
}
.icon.active {
color: #ff5722;
}
</style>
</head>
<body>
<div class="icon-container" onclick="toggleIcon()">
<div id="icon" class="icon">⭐</div>
</div>
<script>
function toggleIcon() {
const icon = document.getElementById('icon');
icon.classList.toggle('active');
icon.textContent = icon.classList.contains('active') ? '❤️' : '⭐';
}
</script>
</body>
</html><script>
function toggleIcon() {
const icon = document.getElementById('icon');
icon.classList.toggle('active');
icon.textContent = icon.classList.contains('active') ? '❤️' : '⭐';
}
</script>
</body>
</html>
标签：function,
center,
效果,
color,
classList,
切换,
active,
图标,
icon
From： https://blog.51cto.com/u_16215583/12062287