数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究点击元素时添加类名，点击元素外部时移除类名
有时，我们需要在点击HTML元素时高亮显示它，并在点击HTML元素外部时使其恢复正常。我们可以通过切换元素的类来实现。这里，切换类的意思是添加和移除类。
在本教程中，我们将学习如何在用户点击元素时向元素添加类名，以及如何在用户点击元素外部时从元素中移除类名。
使用add()和remove()方法在点击元素内部和外部时切换类
在JavaScript中，add()方法用于向数组添加元素，remove()方法用于从数组中移除元素。在这里，我们将访问特定HTML元素的classList，它是一个数组。此外，我们将使用add()和remove()方法以及classList来向HTML元素添加和移除类。
语法
用户可以按照以下语法使用add()和remove()方法，在用户点击元素时添加类，在用户点击元素外部时移除类。
box.addEventListener('click', function () {
//Add class
});
document.addEventListener('click', function (event) {
if (event.target !== targeted_element)
// Remove class
});
在上面的语法中，我们在用户点击框时向classList添加一个类，如果用户点击元素外部，则移除该类。
示例1
在下面的示例中，我们有一个带有“box”类名的div元素。我们使用CSS为“box”类应用了一些样式。此外，我们还在“inner”类中添加了一些CSS属性。
在JavaScript中，当用户点击该框时，我们将“inner”类添加到box元素。此外，我们还在网页上添加了点击事件。在回调函数中，我们检查目标元素是否为box。我们不从box中移除“inner”类；否则，我们将从box中移除“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元素时，我们将“active”类添加到div元素，当用户点击输入框外部时，我们将移除“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()方法。
6000+ 次浏览
