📅 最后修改于: 2023-12-03 15:26:41.449000 🧑 作者: Mango
样式反应图标是一种能够在网页上以图标形式展示状态变化的实用工具，通过样式的改变来实现。在Javascript中，我们可以通过添加或删除CSS类来改变元素的样式，从而实现样式反应图标的效果。
以下是一个简单的示例，演示如何在Javascript中实现样式反应图标。
// 获取DOM元素
const icon = document.querySelector('.icon');
// 添加class
icon.classList.add('active');
// 移除class
icon.classList.remove('active');
可以看到，代码中使用了 classList.add() 和 classList.remove() 方法来添加和移除CSS类来改变元素的样式。
在实际开发中，我们可以通过样式反应图标来展示各种状态变化，比如页面加载状态、表单验证状态等等。
以下是一个利用样式反应图标来展示表单验证状态的示例：
<!DOCTYPE html>
<html>
<head>
<style>
.input {
border: 2px solid black;
padding: 10px;
}
.valid {
border: 2px solid green;
}
.invalid {
border: 2px solid red;
}
.icon {
display: inline-block;
margin-left: 10px;
width: 20px;
height: 20px;
border-radius: 50%;
}
.icon-valid {
background-color: green;
}
.icon-invalid {
background-color: red;
}
</style>
</head>
<body>
<form>
<label for="username">用户名：</label>
<input id="username" class="input" type="text" />
<span class="icon"></span>
</form>
<script>
const input = document.querySelector('.input');
const icon = document.querySelector('.icon');
input.addEventListener('input', function() {
if (this.value === 'admin') {
input.classList.remove('invalid');
input.classList.add('valid');
icon.classList.remove('icon-invalid');
icon.classList.add('icon-valid');
} else {
input.classList.remove('valid');
input.classList.add('invalid');
icon.classList.remove('icon-valid');
icon.classList.add('icon-invalid');
}
});
</script>
</body>
</html>
在示例中，我们为输入框添加了初始样式，在输入框输入内容后，通过判断输入框的值来添加或移除CSS类，并通过改变图标的背景颜色来实现表单验证状态的展示。
样式反应图标是一种非常实用的展示状态变化的工具，在Javascript中，我们可以通过添加或移除CSS类来实现样式反应图标的效果。在实际开发中，我们可以用它来展示各种状态变化，比如页面加载状态、表单验证状态等等。