极客笔记CSS 点击元素时添加类名，在元素外点击时删除类名
有时候，我们需要在点击HTML元素时将其突出显示，并在点击HTML元素外部时恢复正常。我们可以通过在元素中切换类来实现这一点。在这里，切换类的意思是添加和删除类。
在本教程中，我们将学习在用户点击元素时将类名添加到元素，并在用户在元素外点击时从元素中删除类名。
使用Add()和Remove()方法在单击元素内部和外部切换类
在JavaScript中，add()方法用于将元素添加到数组中，而remove()方法用于从数组中删除元素。在这里，我们将访问特定HTML元素的类列表，它是一个数组。此外，我们将使用类列表中的add()和remove()方法将类添加和从HTML元素中删除。
语法
用户可以按照下面的语法使用add()和remove()方法，当用户点击元素时添加类名，当用户点击元素外部时删除类名。
box.addEventListener('click', function () {
//Add class
});
document.addEventListener('click', function (event) {
if (event.target !== targeted_element)
// Remove class
});
在上面的语法中，当用户点击方框时，我们会向classList添加一个类，并在用户点击元素外部时移除该类。
示例1
在下面的示例中，我们有一个带有’class’类名的div元素。我们使用CSS对’class’类应用了一些样式。此外，我们还在’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> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
<div class = "box"> Click on and out the button to toggle the class. </div>
<script>
var box = document.querySelector('.box');
//Add 'inner' class when users click on the box
box.addEventListener('click', function () {
box.classList.add('inner');
});
//Remove the 'inner' class when users click outside the box
document.addEventListener('click', function (event) {
if (event.target !== box)
box.classList.remove('inner');
});
</script>
</body>
</html>
示例2
在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> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
<div class = "input"> Enter your name </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()方法向div元素添加一个’clicked’类。
-
步骤 4 - 将’clickInside’变量的值改为true，将’clickOutside’变量的值改为false。
-
步骤 5 - 向HTML文档添加一个点击事件监听器。在这里，如果’clickoutside’变量的值为false，并且目标元素不是初始div，使用toggleClass()方法从div元素中移除’clicked’类。
-
步骤 6 - 将’clickOutside’变量的值改为true，将’clickInside’变量的值改为false。
示例3
在下面的示例中，我们使用上述解释的自定义算法，当用户点击类时向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> Toggling the class using the <i> toggleClass() </i> method of JavaScript </h2>
<div class = "initial">This is a clickable div </div>
<script>
var initial = document.querySelector('.initial');
// initial values of clickable variables
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>
用户学习了在点击元素时向元素添加类，并在点击元素外部时从元素中移除类的各种方法。在第一种方法中，我们使用了add()和remove()方法。在第二种方法中，我们使用了toggleClass()方法。