极客教程点击元素时添加类名，点击元素外部时删除类名来切换类
有时，我们需要在点击HTML元素时将其突出显示，在点击HTML元素外部时将其恢复正常。我们可以通过在元素中切换类来实现。在这里，“切换类”的意思是添加和删除类。
在本教程中，我们将学习如何在用户单击元素时将类名添加到元素中，并在用户单击元素外部时从元素中删除类名。
使用add()和remove()方法来切换元素内部和外部单击时的类
在JavaScript中，add()方法用于将元素添加到数组中，remove()方法用于将元素从数组中删除。在这里，我们将访问特定HTML元素的类列表，它是一个数组。此外，我们将使用在类列表中添加和删除类的add()和remove()方法来添加和删除HTML元素的类。
语法
用户可以按照以下语法使用add()和remove()方法，在单击元素时添加类，并在单击元素外部时删除类。
box.addEventListener('click', function () {
//添加类
});
document.addEventListener('click', function (event) {
if (event.target !== targeted_element)
//删除类
});
在上述语法中，当用户单击盒子时，我们添加一个类到classList中，并在用户单击元素外部时删除类。
示例1
在下面的示例中，我们有一个带有“box”类名的div元素。我们使用CSS应用了一些“box”类的样式。此外，我们在“inner”类中添加了一些CSS属性。
在JavaScript中，当用户单击盒子时，我们将“inner”类添加到盒子元素中。此外，在回调函数中，我们检查目标元素是否为盒子。如果我们不从箱子中删除“inner”类，则删除“inner”类。
<html>
<head>
<style>
.inner {
width: 450px;
height: 200px;
background-color: red !important;
color: white !important;
padding: 10px;
border-radius: 5px;
font-size: 30px !important;
font-weight: bold;
text-align: center;
}
.box {
width: 500px;
height: 200px;
border: 2px solid green;
color: blue;
font-size: 1rem;
}
</style>
</head>
<body>
<h3>使用JavaScript的add()和remove()方法切换类</h3>
<div class = "box">单击按钮来切换类。 </div>
<script>
var box = document.querySelector('.box');
//当用户单击盒子时添加 'inner' 类
box.addEventListener('click', function () {
box.classList.add('inner');
});
//当用户单击盒子外部时删除 'inner' 类
document.addEventListener('click', function (event) {
if (event.target !== box)
box.classList.remove('inner');
});
</script>
</body>
</html>
例子二
在HTML中，当您单击输入框时，它会突出显示输入框，并且当您单击输入框外部时，它会从输入框中删除突出显示器。
在下面的示例中，我们将创建一个自定义输入框，当用户单击输入框时可以将其突出显示。
在这里，当用户单击div元素时，我们向div元素添加“active”类，当用户单击输入框外部时，我们将删除“active”类。
<html>
<head>
<style>
.input {
width: 400px;
height: 30px;
border: 1px solid grey;
color: grey;
padding: 5px;
}
.active {
border: 2px solid blue !important;
color: blue;
}
</style>
</head>
<body>
<h3>使用JavaScript中的`add()`和`remove() `函数切换类</h3>
<div class = "input"> 输入您的姓名</div>
<script>
var input = document.querySelector('.input');
input.addEventListener('click', function () {
input.classList.add('active');
});
document.addEventListener('click', function (event) {
if (event.target !== input)
input.classList.remove('active');
});
</script>
</body>
</html>
使用ToggleClass()方法
toggleClass()方法允许用户添加和删除HTML元素的类。 在这里，我们将在用户单击元素时添加类， 并在用户单击元素外部时删除类。
语法
用户可以按照以下语法使用toggleClass()方法添加和删除元素的类。
initial.classList.toggle('clicked');
在以上语法中，“initial”是在JavaScript中访问的HTML元素。 它向HTML元素添加和删除“clicked”类。
步骤
- 步骤1 −定义“clickInside”和“clickOutside”变量，并将它们用true和false值初始化。
-
步骤2 −在JavaScript中访问div元素并添加点击事件侦听器。
-
步骤3 −在事件侦听器的回调函数中，如果“clickInside”为false，则表示用户上次单击了外部。因此，我们需要使用toggleClass()方法将“clicked”类添加到div元素中。
-
步骤4 −将“clickInside”变量的值更改为true，将“clickOutside”变量的值更改为false。
-
步骤5 −将点击事件侦听器添加到HTML文档中。在这里，如果“clickoutside”变量的值为false，并且目标元素不是初始div，则使用toggleClass()方法从div元素中删除“clicked”类。
-
步骤6 −将“clickOutside”变量的值更改为true，将“clickInside”变量的值更改为false。
例子三
在下面的示例中，我们使用上述自定义算法，在用户单击元素时将类添加到HTML元素中，并使用toggleClass()方法在用户单击元素外部时从HTML元素中删除类。
在输出中，用户可以注意到它更改了尺寸和字体颜色。当他们单击div元素时，以及当用户单击div元素之外时，它会变为普通状态。
<html>
<head>
<style>
.initial {
width: 400px;
height: 250px;
border: 1px solid grey;
color: grey;
padding: 5px;
font-size: 3rem;
}
.clicked {
color: red !important;
border: 1px solid red !important;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<h2>使用JavaScript中的`toggleClass()`方法切换类</h2>
<div class = "initial">这是可以点击的div</div>
<script>
var initial = document.querySelector('.initial');
// 可点击变量的初始值
var clickedInside = false;
var clickedOutside = true;
initial.addEventListener('click', function () {
if (!clickedInside) {
initial.classList.toggle('clicked');
clickedInside = true;
clickedOutside = false;
}
});
document.addEventListener('click', function (event) {
if (event.target !== initial && !clickedOutside) {
initial.classList.toggle('clicked');
clickedInside = false;
clickedOutside = true;
}
});
</script>
</body>
</html>
在这两种方法中，我们学习了如何在单击HTML元素时向元素添加类，并在单击元素外部时从元素中删除类。 第一种方法中，我们使用了add()和remove()方法。在第二种方法中，我们使用了toggleClass()方法。